bootstrap datetimepicker和daterangepicker

$('#datepicker').datetimepicker({
            //在输入框显示的格式
            format: 'yyyy-mm-dd',
            autoclose: true,
            //弹出选择器时默认选择的日期,不是文本框的值
            initialDate:new Date(new Date()-24*60*60*1000),
            //endDate后的日期都是灰色,不可选
            endDate: new Date(new Date()-24*60*60*1000),
            minView: 2,//表示最小单位是日,其他值有1,2,3,4
            //minuteStep:1,//选择分钟时显示的时间间隔,此处设置为1分钟
            language:  'zh-CN'
            }).on('changeDate', function (e) {
                //日期变动监听
                //主动通知bootstrapValidator才可触发验证
                $('#formSearch').bootstrapValidator('revalidateField', 'date');
});

daterangepicker
准备工作




js代码

//初始化
var oDatepicker = DatepickerInit();
oDatepicker.init();
//定义类
function DatepickerInit(){
        var oDatepickerInit = new Object();
        var dateYest=new Date(new Date()-24*60*60*1000);
        oDatepickerInit.init=function(){
            $('#datetimepicker').daterangepicker({
                'autoUpdateInput':true,
                'showWeekNumbers': true,
                //开始时间
                'startDate': dateYest, 
                //结束时间
                'endDate': dateYest, 
                //"autoApply": true,
                "ranges": {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '过去七天': [moment().subtract(6, 'days'), moment()],
                    '过去三十天': [moment().subtract(29, 'days'), moment()],
                    '本周': [moment().startOf('week'), moment().endOf('week')],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    //'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                locale: {
                    format: 'YYYY-MM-DD',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    separator : ' 至 ',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                   },
            }, function(start, end, label) {
                //监听日期选择器的选择事件,对于初始化startDate、endDate无效
                //start,end是moment类型
                oDatepicker.startDate = start.format('YYYY-MM-DD');
                oDatepicker.endDate= end.format('YYYY-MM-DD');
            });
        }
        //需要手动赋值
        oDatepickerInit.startDate = dateYest.format('yyyy-MM-dd');
        oDatepickerInit.endDate= dateYest.format('yyyy-MM-dd');
        return oDatepickerInit;

    }

html:


你可能感兴趣的:(bootstrap datetimepicker和daterangepicker)