bootstrap-datepicker学习之options

短命女 2022-02-23 11:48 427阅读 0赞

$('#id').datepicker({
            format: 'yyyy/mm/dd', // 日期格式化
            container: 'body', // 弹出时间选择器的代码是添加到哪里的,默认是body下,可以设置填写css字符串指定弹出的代码添加的位置
            autoclose: true, // 选中日期后日历自动关闭
            forceParse: true, // 在输入框输入两位数字会转成年
            maxViewMode: 4, // 设置可以选择的模式,分别为0（天）、月、年、十年、4（百年）。
            minViewMode： 0, // 值和上面的含义一样
            startView: 0, // 值的含义和上面一样,开始显示的日历页面,默认是选择天的页面
            multidate: false, // 是否可以多选
            multidateSeparator: ',' // 设置多选日期的分隔符
            language: 'zh-CN', // 要引入locales包下的zh-CN.js
            clearBtn: false, // 是否在日期选择器下方显示清除按钮
            todayBtn: true, // 是否在日期选择器下方显示今日按钮
            showWeekDays: true, // 是否显示周几
            weekStart: 0,//从周几作为一周的开头,0是周日
            todayHighlight: false, // 是否高亮显示今日
            keyboardNavigation: true, // 是否允许使用方向键改变当前日期
            disableTouchKeyboard: false, // 是否禁止使用键盘操作日期选择器,默认不禁止.
            calendarWeeks: false, //显示全年第几周
            assumeNearbyYear: true, // 显示距离两位数最近的年份比如15指2015,97指1997;也可以给数字20强制解析成20开头的年份
            datesDisabled: ['2019/04/10', '2019/04/11'], // 设置日期不允许被选中,如果是单个日期可以用字符串,多个日期可以用数组,日期格式要与format设定的格式一致.
            daysOfWeekDisabled: [], // 设置周几的日期不允许被选中,可以用数组或字符串,从0(星期日)到6(星期六),如字符串'06'和'0,6'以及数组[0,6]都是一样的结果
            daysOfWeekHighlighted: [0, 6], // 设置周几的日期高亮显示 ,参数和daysOfWeekDisabled设置的一致.
            defaultViewDate: new Date(2019, 1, 1), // 设置打开日历时显示的日期,默认是今天,参数可以是date,字符串(符合format格式),对象(包含year:默认值今年,month:0(一月),day:1(一日))
            beforeShowDay: function (date) {
                // 在初始化日期选择器时,会把当前页所有日期天数进行初始化然后依次给每个日期的天数执行beforeShowDay函数;每改变一次月份就执行一次
                // 返回值为布尔值代表是否可以被选中,返回字符串代表给当前日期应用的css的class样式,返回对象是前面功能的集合
                var newDate = new Date(date);
                var today = new Date();
                if (today.toLocaleDateString() == newDate.toLocaleDateString()) {
                    return {
                        enabled: true, // 是否可以选中
                        classes: 'calendarStyle', // 显示应用于当前date的class样式,禁止选中就不会生效
                        tooltip: 'xxx', // 通过title属性实现,会把xxx添加到title属性中,当你鼠标移到符合条件的日期时就会显示(不过移动端感觉没什么用,因为没有鼠标)
                        content: '今' // 显示当前date在日期选择器中的文字,默认是每月的天数
                    }
                }
            },
            beforeShowMonth: function (date) {
                // 和上面一样只不过是循环给月份执行beforeShowMonth方法,也就是执行12次.每改变一次年份就执行一次
                var newDate = new Date(date);
                var today = new Date();
                if (newDate.getMonth() == today.getMonth()) {
                    return {
                        enabled: true, // 是否可以选中
                        classes: 'calendarStyle', // 选中之前的月份的样式,这个如果禁止选中是不会生效的,需要在月份视图里面查看效果
                        tooltip: 'xxx' // 如上
                    }
                }
            },
            beforeShowYear: function (date) {
                // 和上面一样只不过会把在你选择年份的那个页面的所有年份数全部执行一次beforeShowYear方法
                // 以1为差值就是年份的末尾从0到9然后加上前一年和后一年总计12年。
                // 比如当前年份是2019年（2018年依旧如此），那么会执行2010-2019以及2009和2020这12次依次循环
                var newDate = new Date(date);
                var today = new Date();
                if (newDate.getFullYear() == today.getFullYear()) {
                    return {
                        enabled: true, // 是否可以选中
                        classes: 'calendarStyle', // 选中之前的月份的样式,这个如果禁止选中是不会生效的,需要在月份视图里面查看效果
                        tooltip: 'xxx' // 如上
                    }
                }
            },
            beforeShowDecade: function (date) {
                // 这里和上面的年一样也是循环12次,唯一不同的地方就是从00到90然后加上前10年和后10年
                // 比如当前年份是2019年,那么会执行2000,2010,2020...2090,然后加上1990,2100一共12次
                var newDate = new Date(date);
                var today = new Date();
                if (newDate.getFullYear() < today.getFullYear()) {
                    return {
                        enabled: true, // 是否可以选中
                        classes: 'calendarStyle', // 选中之前的月份的样式,这个如果禁止选中是不会生效的,需要在月份视图里面查看效果
                        tooltip: 'xxx' // 如上
                    }
                }
            },
            beforeShowCentury: function (date) {
                // 这里和上面的年一样也是循环12次,唯一不同的地方就是从000到900然后加上前100年和后100年
                // 比如当前年份是2019年,那么会执行2000,2100,2200...2900,然后加上1900,3000一共12次
                var newDate = new Date(date);
                var today = new Date();
                if (newDate.getFullYear() == parseInt(today.getFullYear() / 100) * 100) {
                    return {
                        enabled: true, // 是否可以选中
                        classes: 'calendarStyle', // 选中之前的月份的样式,这个如果禁止选中是不会生效的,需要在月份视图里面查看效果
                        tooltip: 'xxx' // 如上
                    }
                }
            },
            startDate: '2019/04/01', // 开始日期之前的都不允许选中
            endDate: new Date(Date.now() - 864000000), // 可以是date或者字符串,在此时间之后的时间不可以被选中
            enableOnReadonly: true, // 默认值:true,字面意思是是否开启只读,具体功能不太清楚
            immediateUpdates: true, // 是否开启即时更新,默认false,如果开启即时更新,那么当选择月或年时会立即更新输入框的值,否则只会在选择日期时立即更新输入框.
        });