BootStrap的日历插件的使用

BootStrap的日期插件的使用:
加载Bootstrap-datetimepicker插件的js.


HTML中:<input type="text" value="2012-05-15 21:05" id="datetimepicker">


JS中:$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});


类似案例:
HTML: 
<div id="date-from-picker" class="input-group date datepicker">
                                <input type="text" name="date_from"
                                    class="form-control" readonly="readonly"
                                    value="{{ array_get($search, 'date_from') }}" />
                                <span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            </div>


JS:
requirejs(['../config'], function () {
    require(['jquery', 'bootstrap', 'datetimepicker-locale-zh-CN'], function ($) {
        var dateFromPicker = $('#date-from-picker'),
            dateFromInput = dateFromPicker.find('input'),
            dateToPicker = $('#date-to-picker'),
            dateToInput = dateToPicker.find('input');


        dateFromPicker.datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            minuteStep: 5,
            language: 'zh-CN',
            minView: 'month'
        });


        dateToPicker.datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            minuteStep: 5,
            language: 'zh-CN',
            minView: 'month'
        });


        dateFromPicker.on('changeDate', function (event) {
            var toDate = dateToInput.val(),
                date = event.date;
            if (date) {
                date.setUTCHours(0);
                date.setUTCMinutes(0);
                date.setUTCSeconds(0);
                date.setUTCMilliseconds(0);
            }


            dateToPicker.datetimepicker('setStartDate', event.date);
            if ($.trim(toDate) !== '' && event.date > new Date(toDate)) {
                dateToInput.val('');
                dateToPicker.datetimepicker('update');
            }
        });


        dateToPicker.on('changeDate', function (event) {
            var fromDate = dateFromInput.val(),
                date = event.date || new Date();


            if (date) {
                date.setUTCHours(0);
                date.setUTCMinutes(0);
                date.setUTCSeconds(0);
                date.setUTCMilliseconds(0);
            }


            dateFromPicker.datetimepicker('setEndDate', date);
            if ($.trim(fromDate) !== '' && date < new Date(fromDate)) {
                dateFromInput.val('');
                dateFromPicker.datetimepicker('update');
            }
        });
    });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值