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

今天药忘吃喽~ 2023-10-05 13:09 4阅读 0赞

### 1 年份 ###

HTML代码：

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

最终效果图：  
![20201103190510383.png][]

#### 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' })"/>

最终效果图：

![20201111185256767.png][]

#### 3 月份 ####

HTML代码：

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

最终效果图：

![20201103190552838.png][]

#### 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')+'周');
    }

最终效果图：

![2020110319065171.png][]

#### 5 日 ####

HTML代码：

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

最终效果图：

![20201103190627525.png][]

#### 6 小时 ####

HTML代码：

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

最终效果图：

![20201103214423968.png][]

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

[20201103190510383.png]: https://img-blog.csdnimg.cn/20201103190510383.png
[20201111185256767.png]: https://img-blog.csdnimg.cn/20201111185256767.png
[20201103190552838.png]: https://img-blog.csdnimg.cn/20201103190552838.png
[2020110319065171.png]: https://img-blog.csdnimg.cn/2020110319065171.png
[20201103190627525.png]: https://img-blog.csdnimg.cn/20201103190627525.png
[20201103214423968.png]: https://img-blog.csdnimg.cn/20201103214423968.png