日期控件My97DatePicker-4.8的配置与使用演示

最新推荐文章于 2024-10-11 13:44:39 发布

@带甜味的盐@

最新推荐文章于 2024-10-11 13:44:39 发布

阅读量1.7k

点赞数 1

分类专栏：前端 SYW 文章标签： My97DatePicker 日期控件

本文链接：https://blog.csdn.net/s_y_w123/article/details/85329009

版权

SYW 同时被 2 个专栏收录

96 篇文章 3 订阅

订阅专栏

前端

82 篇文章 7 订阅

订阅专栏

日期控件My97DatePicker-4.8的配置与使用演示

My97DatePicker，是一款非常实用的日期控件，这款日期控件不依赖于任何库，可以独立使用，支持独立的设置日期的格式，控制默认日期，控制日期显示范围，并且支持多种语言，还有非常多的日期皮肤样式，非常的小巧实用。

今天我要说的是：My97DatePicker-4.8版本，只需要引入WdatePicker.css和WdatePicker.js即可使用。

关于本博客的源代码及My97DatePicker库（里面有全皮肤），下载地址：

文件下载地址

话不多说，我们代码演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My97DatePicker日期控件</title>
    <link rel="stylesheet" href="My97DatePicker-4.8/skin/WdatePicker.css">
</head>

<body>
    <h6>日期有自动纠错的功能，例如输入1997-02-29，就会转换成1997-03-01，因为1997年不是闰年</h6>

    日期完全展示(获取焦点触发)：
    <input name="start_time" type="text" class="Wdate" onfocus="WdatePicker()"><br><br>

    日期完全展示（点击日历图标触发）：
    <input id="d12" type="text"/>
    <img onclick="WdatePicker({el:'d12'})" src="My97DatePicker-4.8/skin/datePicker.gif" width="16" height="22" align="absmiddle"><br><br>

    只展示年份：
    <input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy'})"><br><br>
    
    只展示月份：
    <input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'M'})"><br><br>

    只展示天：
    <input name="start_time" type="text" class="Wdate" onfocus="WdatePicker({dateFmt: 'd'})"><br><br>

    <!-- 周算法不同的地方有一些差异常见算法有两种 1. ISO8601:规定第一个星期四为第一周,默认值2. MSExcel:1月1日所在的周 -->
    显示第几周(高亮显示周末)：
    <input id="d121" type="text" onclick="WdatePicker({isShowWeek:true,highLineWeekDay:true})" /><br><br>

    显示星期几：
    <input type="text" id="d245" onclick="WdatePicker({dateFmt:'DD, MMMM d, yyyy'})" class="Wdate"/><br><br>

    设置起始日期2018-05-01（即日历默认在那一天）：
    <input type="text" id="d221" onclick="WdatePicker({startDate:'2018-05-01'})"/><br><br>

    年月日使用当年当月的1日,时分秒使用00:00:00作为起始时间：
    <input type="text" id="d233" onclick="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/><br><br>

    日期限制，限制日期的范围是 2006-09-10到2008-12-20：
    <input id="d411" class="Wdate" type="text" onclick="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/><br><br>

    以“X年X月X日X时X分X秒”的格式来显示日期：
    <input type="text" id="d241" onclick="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})" class="Wdate" style="width:300px"/><br><br>

    日期转换：自动把X年X月X日这样的日期，转换成系统可识别的x-x-x：
    <input id="d244" type="text" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
    <input id="d244_2" type="text" /><br><br>

    双月日历：
    <input class="Wdate" type="text" onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/><br><br>

    <br>
    禁用清空按钮：
    <input class="Wdate" type="text" id="d15" onclick="WdatePicker({isShowClear:false,readOnly:true})" /><br><br>
    <br>
    繁体中文:
    <input id="d311" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-tw'})" />
    英文:
    <input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang:'en'})" />
    简体中文:
    <input id="d313" class="Wdate" type="text" onFocus="WdatePicker({lang:'zh-cn'})" /><br><br>

    <br>
    皮肤搭配（皮肤可下载）:
    <input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'default'})" />
    <input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})" />
    <input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'blueFresh'})" />
    <input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'twoer'})" />
</body>
<script language="javascript" type="text/javascript" src="My97DatePicker-4.8/WdatePicker.js"></script>

</html>