fastadmin 自定义页面使用bootstrap时间插件

fastadmin 自定义页面使用bootstrap时间插件

使用 bootstrap-daterangepicker

• define 中引入 bootstrap-daterangepicker 声明 daterangepicker
• index 方法中绑定渲染 daterangepicker
• html 中加入对应 class

html

<div class="form-group">
    <label for="excel[rebate_time]">付款时间</label>
    <input type="text" class="form-control datetimepicker form_datetime" id="excel[rebate_time]" name="excel[rebate_time]" autocomplete="off" placeholder="请输入名称">
</div>

js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'editable','bootstrap-daterangepicker'], function ($, undefined, Backend, Table, Form,daterangepicker) {
    var Controller = {
        index: function () {
        // ....
            $(".form_datetime").daterangepicker({
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    customRangeLabel: __("Custom Range"),
                    applyLabel: __("Apply"),
                    cancelLabel: __("Clear"),
                }
            });
        // ....
        // ....
        // .... 设置默认值为空，并且有今日、本周、本月选择
        // ....
                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')];
        $(".form_datetime").daterangepicker({
            timePicker: false,
            autoUpdateInput: false,
            timePickerSeconds: true,
            timePicker24Hour: true,
            autoApply: true,
            locale: {
                format: 'YYYY-MM-DD HH:mm:ss',
                customRangeLabel: "自定义",
                applyLabel: "确认",
                cancelLabel: "清空",
            },
            ranges: ranges,
        });
        $('.form_datetime').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') +' - '+picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
        });
        $('.form_datetime').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
        // ....
        }
    }
}

使用 bootstrap-datetimepicker

html

<input type="text" class="form-control input-inline datetimepicker form_datetime" data-date-format="YYYY-MM-DD" value="" readonly="readonly" placeholder="指定日期" name="end_date" />

js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'editable','bootstrap-datetimepicker'], function ($, undefined, Backend, Table, Form,datetimepicker) {
    var Controller = {
        index: function () {
        // ....
            var json = Config.json;
            $(".form_datetime").datetimepicker({
            });
        // ....
        }
    }
}

官方对 datetimepicker 案例

//绑定select元素事件
require(['bootstrap-datetimepicker'], function () {
    var options = {
        format: 'YYYY-MM-DD HH:mm:ss',
        icons: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-chevron-up',
            down: 'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-history',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        },
        showTodayButton: true,
        showClose: true
    };
    $('.datetimepicker').parent().css('position', 'relative');
    $('.datetimepicker').datetimepicker(options);
});

或者

Form.events.datetimepicker($("#toolbar"));

以上两种方法来为文本框绑定事件。

官方参考链接地址：https://ask.fastadmin.net/question/189.html