# 日期选择

参考文档: https://xdsoft.net/jqplugins/datetimepicker/

# 选择日期

aa

<input id="datetimepicker" class="form-control">
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.datetimepicker('#datetimepicker', {
            timepicker: false,
            format: 'Y-m-d',
            onChangeDateTime: function (dp, $input) {
                console.log($input.val())
            }
        });
    })
</script>

# 日期与时间

aa

<input id="datetimepicker" class="form-control">
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.datetimepicker('#datetimepicker',{
        	format:'Y-m-d H:i:s',
			step:5,
            onChangeDateTime:function(dp,$input){
                console.log($input.val())
            }
        });
    })
</script>

# 区间时间

aa

Start <input id="date_timepicker_start" value="">
End <input id="date_timepicker_end" value="">
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.datetimepicker('#date_timepicker_start',{
            format:'Y/m/d',
            onShow:function( ct ){
                this.setOptions({
                    maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
                })
            },
            timepicker:false
        });
        hdjs.datetimepicker('#date_timepicker_end',{
            format:'Y/m/d',
            onShow:function( ct ){
                this.setOptions({
                    minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
                })
            },
            timepicker:false
        });
    })
</script>

# 时间选择

aa

时间<input id="datetimepicker" class="form-control"">
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.datetimepicker('#datetimepicker',{
            datepicker: false,
            format: 'h:i'
        });
    })
</script>

# 列表框日期

aa

<select name="birthyear"></select>
<select name="birthmonth"></select>
<select name="birthday"></select>
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.dateselect({
            year: document.querySelector('[name="birthyear"]'),
            month: document.querySelector('[name="birthmonth"]'),
            day: document.querySelector('[name="birthday"]'),
        }, {
            year: "{{$user['birthyear']}}",
            month: "{{$user['birthmonth']}}",
            day: "{{$user['birthday']}}"
        });
    })
</script>

# 日期区间列表

参考文档: http://www.daterangepicker.com/

aa

# 基本使用

<input name="birthdate" value="2017-11-07 至 2017-12-22"  class="form-control"/>
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.daterangepicker({
            //标签元素
            element: 'input[name="birthdate"]'
        });
    })
</script>

# 显示周与时间

aa

<input name="birthdate" value="2019-02-22 至 2020-3-22" class="form-control"/>
<script>
    require(['hdjs', 'moment','bootstrap'], function (hdjs, moment) {
        hdjs.daterangepicker({
            //标签元素
            element: 'input[name="birthdate"]',
            //选项参考插件官网
            options: {
                ranges: {
                    //'最近1小时': [moment().subtract('hours',1), moment()],
                    '今日': [moment().startOf('day'), moment()],
                    '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                    '最近7日': [moment().subtract('days', 6), moment()],
                    '最近30日': [moment().subtract('days', 29), moment()],
                    '本月': [moment().startOf("month"), moment().endOf("month")],
                    '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                },
                showDropdowns: true,
                alwaysShowCalendars: true,
            },
            callback: function (start, end, label) {
                var str = start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD');
                console.log(str);
            }
        });
    })
</script>

# 时间选择

参考文档: http://weareoutman.github.io/clockpicker/

aa

# 使用方法

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
    require(['hdjs'], function (hdjs) {
        hdjs.clockpicker('.clockpicker',{
            afterDone: function() {
                console.log("after hide times is "+$('.clockpicker input').val());
            }
        });
    });
</script>

# moment

参考文档: http://momentjs.cn/

使用方法

<script type="text/javascript">
    require(['moment'], function (moment) {
        //设置语言
        moment.locale('zh-CN');
        console.log(moment().format('YYYY-MM-DD HH:mm:ss'));
    });
</script>