当前位置: 首页 > 工具软件 > Clock Picker > 使用案例 >

DateRangePicker的使用

宓茂才
2023-12-01

html 

            <div class="col-md-5">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        <input type="text" class="form-control pull-right" id="reservationtime" name="reservationtime">
                    </div>
                    <!-- /.input group -->
                </div>
            </div>

 js

        $('input[name="reservationtime"]').daterangepicker({
            "autoApply": true,
            timePicker: true, //显示时间
            timePicker24Hour: true, //时间制
            timePickerSeconds: true, //时间显示到秒
            startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
            endDate: moment(new Date()), //设置结束器日期
            maxDate: moment(new Date()), //设置最大日期
            "opens": "center",
            //ranges: {
            //    //'今天': [moment(), moment()],
            //    //'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            //   // '上周': [moment().subtract(6, 'days'), moment()],
            //    //'前30天': [moment().subtract(29, 'days'), moment()],
            //    //'本月': [moment().startOf('month'), moment().endOf('month')],
            //    //'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            //},
            showWeekNumbers: true,
            locale: {
                format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
                //applyLabel: '确定', //确定按钮文本
                //cancelLabel: '取消', //取消按钮文本
                //customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ],
                firstDay: 1
            },
        }, function (start, end, label) {
                dateFrom = start.format('YYYY-MM-DD HH:mm:ss');
                dateTo  = end.format('YYYY-MM-DD HH:mm:ss')
            //timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
            //console.log(timeRangeChange);
        });

 

 类似资料: