WdatePicker 日历控件使用支持6种日期类型（年份、月份、季度、周、日、小时）

原创于 2023-03-16 13:44:23 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #WdatePicker

本文详细介绍了WdatePicker日历控件的使用，涵盖年份、季度、月份、周、日和小时选择。通过示例HTML代码展示了如何实现这些功能，并提供了对应的最终显示效果。

1 年份

HTML代码：

年：
<input type="text" onclick="WdatePicker({ dateFmt: 'yyyy', maxDate: '%y' })"/>

2 季度

HTML代码：

季度：
<input type="text" onclick="WdatePicker({ dateFmt: 'yyyy-MM季度', isQuarter: true, isShowOK: false, disabledDates:['....-0[5-9]-..','....-1[0-2]-..'],startDate:'%y-01-01' })"/>

最终效果图：

3 月份

HTML代码：

 
月：
<input type="text" onclick="WdatePicker({ dateFmt: 'yyyy-MM', maxDate: '%y-%M' })"/>

最终效果图：

4 周

HTML代码：

周：
<input id="week" type="text" onclick="WdatePicker({ isShowWeek: true, onpicked: GetWeek, firstDayOfWeek: 1, errDealMode: 3, isShowClear: true, maxDate: '%y-%M-{%d-1}'})"/>

JS代码：

 //返回yyyy年-第WW周格式
function GetWeek(){
    $('#week').val($dp.cal.getP('y')+'年-'+$dp.cal.getP('W')+'周');
}

最终效果图：

5 日

HTML代码：

日：

<input type="text" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd', maxDate: '%y-%M-%d' })"/>

最终效果图：

6 小时

HTML代码：

小时：

<input type="text" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH时', maxDate: '%y-%M-%d %H时' })"/>

最终效果图：

注：需要引入WdatePicker.js 文件。