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

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

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

今天我要说的是:My97DatePicker-4.8版本,只需要引入WdatePicker.cssWdatePicker.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>
  • 这是一段完整的代码,复制下来,改变文件的引入路径为本机的路径即可使用,就是这么爽快。
  • 每一段代码我都附上了解释,一目了然,想实现是什么效果,直接运行查看即可。

附上这些代码的运行截图

运行截图


  • 当然这些都是我们可能经常会使用的,如果想更深入的学习,可以去查看My97DatePicker的官方文档:

My97DatePicker官方文档

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页