WdatePicker日期插件的使用（简洁实例）

最新推荐文章于 2024-09-14 13:43:00 发布

zhumengstyle

最新推荐文章于 2024-09-14 13:43:00 发布

阅读量3.5w

点赞数 7

分类专栏：前端工具 jQuery 文章标签：插件日期插件

本文链接：https://blog.csdn.net/zhumengstyle/article/details/74348175

版权

jQuery 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端工具

1 篇文章 0 订阅

订阅专栏

在程序开发中，难免会遇到一些页面要求用户输入日期格式的数据，为了规避可能出现的各种日期格式的填写错乱，更为了改善用户体验，方便用户填写，一般采用日期插件，让用户可以直接选择日期或者时间，十分方便。
下面，简单介绍一个日期时间插件WdatePicker，使用场景及方法如下：
首先，在页面中引入插件的js和css文件，

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script language="javascript" type="text/javascript"  src="WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="WdatePicker.css" >
    </head>
    <body>
        <input name="start_time" type="text"    class="Wdate" onfocus="WdatePicker()">
    </body>
</html>

效果如下：
日期插件
显示的内容可以通过参数进行不同的配置，如果只显示年份的话：

        <input name="start_time" type="text"    class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy'})">

效果为：
年份筛选
当然，还有其他很丰富的配置，比如限制日期范围，开始和结束日期等等，都可以通过参数进行配置，这里不一一示例。