使用My97DatePicker制作季度选择器

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

2、新建页面，并将添加到项目中的js文件，引入到页面。引入方法如下：<script src="/Scripts/My97DatePicker/WdatePicker.js"></script>

3、在新建的页面，添加需要使用季度选择器的input元素。 <div class="layui-inline AfterSysTable" style="display: none;"> <label class="layui-form-label"> 开始季度： </label> <div class="layui-input-inline"> <input id="StartQuarter" type="text" name="StartQuarter" class="layui-input" /> </div> </div> <div class="layui-inline AfterSysTable" style="display: none;"> <label class="layui-form-label"> 截止季度： </label> <div class="layui-input-inline"> <input id="EndQuarter" type="text" name="EndQuarter" class="layui-input" /> </div> </div>

4、编写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[5-9]-..','....-1[0-2]-..'],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[5-9]-..','....-1[0-2]-..'],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) + "季度"); }

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