bootstrap daterangepicker 添加清除按钮

最新推荐文章于 2024-08-20 14:14:38 发布

timsqin

最新推荐文章于 2024-08-20 14:14:38 发布

阅读量6.4k

点赞数 2

本文链接：https://blog.csdn.net/timsqin/article/details/80534791

版权

daterangepicker 基本是bootstrap下最完美的时间控件唯独少个清除功能官方没提供自己写了个

 var searchModel = {
            Start: null,
            End: null
        };
        $(function () {
            $("#createdOn").daterangepicker({
                //maxDate: moment(), //最大时间
                datePicker: true,
                showDropdowns: true,
                showWeekNumbers: false,
                ranges: {
                    '今日': [moment().startOf('day'), moment()],
                    '昨天': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                    '最近7日': [moment().subtract('days', 6), moment()],
                    '最近30天': [moment().subtract('days', 29), moment()]
                },
                alwaysShowCalendars: true,
                opens: 'right',
                format: 'YYYY-MM-DD',
                buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-primary blue',
                cancelClass: 'btn-small',
                "locale": {
                    cancelLabel: "清除",
                }
            },
                function (start, end) {
                    searchModel.Start = start.format('YYYY-MM-DD 00:00:00');
                    searchModel.End = end.format('YYYY-MM-DD 23:59:59');
                });
            //清空日期
            $('#createdOn').on('cancel.daterangepicker', function (ev, picker) {
                $('#createdOn').val('');
                searchModel.Start = null;
                searchModel.End = null;
            });