fastadmin 自定义页面使用时间控件

本文引用百度经验的内容，放在CSDN只为了更加方便其他人搜索和使用！

html页面部分：

 <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post" action="" id="form">
            <div class="row">
                <div class="row">
                    <div class="form-group">
                        <label for="createtime" class="control-label col-xs-2">日期</label>
                        <div class="col-xs-5">
                            <input type="hidden" class="form-control operate" name="createtime-operate" data-name="createtime" value="RANGE" readonly="">
                            <input type="text" class="form-control datetimerange" name="startTime" value="" id="start_time" data-index="12" onfocus="getdaterangepicker(form)" autocomplete="off">
                        </div>
                        <div class="col-xs-5">
                            <button type="submit" class="btn btn-success" formnovalidate="">提交</button>
                            <button type="reset" class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
    </form>

html引用js部分：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/> 

html页面jS部分：

<script>
	$('input[name="dates"]').daterangepicker();
    function getdaterangepicker(form) {
        //绑定日期时间元素事件
        if ($(".datetimerange", form).size() > 0) {
            require(['bootstrap-daterangepicker'], function () {
                var ranges = {};
                ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
                ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
                ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
                ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
                ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
                var options = {
                    timePicker: false,
                    autoUpdateInput: false,
                    timePickerSeconds: true,
                    timePicker24Hour: true,
                    autoApply: true,
                    locale: {
                        format: 'YYYY-MM-DD HH:mm:ss',
                        customRangeLabel: __("Custom Range"),
                        applyLabel: __("Apply"),
                        cancelLabel: __("Clear"),
                    },
                    ranges: ranges,
                };
                var origincallback = function (start, end) {
                    $(this.element).val(start.format(this.locale.format) + " - " + end.format(this.locale.format));
                    $(this.element).trigger('blur');
                };
                $(".datetimerange", form).each(function () {
                    var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('').trigger('blur');
                    });
                    $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
                });
            });
        }
    }
</script>