使用My97DatePicker制作季度选择器

使用My97DatePicker制作季度选择器

日期选择在我们的项目中使用的非常广泛，有的按时间，有的按日期，有的按季度，可以方便我们快速检索想要的数据。本文介绍My97DatePicker来制作季度选择器。

下载My97DatePicker的js文件，并添加到项目，方便我们后面在项目中快速引用。

新建页面，并将添加到项目中的js文件，引入到页面。引入方法如下：

在新建的页面，添加需要使用季度选择器的input元素。

编写js代码，实现input选择的点击事件，用于触发季度选择器。此处需要注意，My97DatePicker原本不支持季度选择，我们这里通过禁用一些日期，然后格式化为我们想要的格式，即：yyyy年MM季度

var elem = $("#StartQuarter");

// 季度绑定日历控件

if(elem.length > 0){

elem.attr("readonly", "readonly");

elem.on("click",function(){

WdatePicker({el:this, dateFmt:'yyyy年MM季度',disabledDates:['....-0-..','....-1-..'],startDate:'%y-01-01',minDate:'#F{$dp.$D(\'EndQuarter\',{y:-1});}', maxDate:'#F{$dp.$D(\'EndQuarter\');}'});

}).attr("readonly", "readonly");

$("#EndQuarter").on("click",function(){

WdatePicker({el:this, dateFmt:'yyyy年MM季度',disabledDates:['....-0-..','....-1-..'],startDate:'%y-01-01', maxDate:'#F{$dp.$D(\'StartQuarter\',{y:+1});}',minDate:'#F{$dp.$D(\'StartQuarter\');}'});

}).attr("readonly", "readonly");

$("#StartQuarter,#EndQuarter").val(date.getFullYear() + "年0" + (parseInt(date.getMonth() / 3) + 1) + "季度");

}

保存代码，运行页面，即可看见效果。