Bootstrap Datetimepicker 季度筛选

来源:互联网 发布:js判断div是否有class 编辑:程序博客网 时间:2024/05/15 10:40

仅限于筛选到季度。

原理
将原月筛选转为季度筛选。

实现
添加datetimepicker自定义语言:

$.fn.datetimepicker.dates['zh-CN-qtrs'] = {    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],    daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],    months: ["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],    monthsShort: ["一季度", "二季度", "三季度", "四季度", "", "", "", "", "", "", "", ""],    clear: "清除",    meridiem: ["上午", "下午"]};

创建对象:

//初始化选中当前季度var date = new Date();date.setDate(1);date.setMonth(Math.floor(date.getMonth() / 3));$('input.input-date').each(function(idx, elem) {    var that = $(this);    that.datetimepicker({        clearBtn:true,        startView:3,        minView:3,        format:'yyyy/MM',        language:'zh-CN-qtrs',        initialDate: date    });    that.data('datetimepicker').picker.addClass('quarter');}); 

添加样式:

.datetimepicker.quarter .month {    width: 48%;}.datetimepicker.quarter .month:nth-child(n+5){    display: none;}
原创粉丝点击