前言：

　　在实际项目开发中，日期选择是一个十分常见而且重要的问题，在表单中设计到日期的验证时，如果让用户自己输入时间的话，那么使用正则进行验证其正确性是不可取的，因为他一般只能验证日期的格式，无法准确的验证其日期正确性。此时可以使用日期选择器组件来帮助我们完整。

用法：

使用日期在选择其组件其实很简单，我们只需要在*.html文件里面引入日期选择器的*.js文件，并在input输入框中设置'onclick'事件即可。

演示：

现在我使用两种日期选择器组件进行演示，：

第一个是：My97DatePicker，下载链接：http://files.cnblogs.com/files/XYQ-208910/My97DatePickerBeta.zip

第二个是自定义的日期选择器代码，我将其放在MyCustomDatePicker文件中：下载链接：http://files.cnblogs.com/files/XYQ-208910/MyCustomDatePicker.zip

测试代码如下：

方式一：使用My97DatePicker

PickDdate.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="pick date!">

    <meta name="keywords" content="javascript,html,css">

    <!--引入My97DatePicker日期组件的js文件 -->

    <script type="text/javascript" src="My97DatePicker/WdatePicker.js"> </script>

    <title>日期选择器的使用</title>

</head>

<body>

     <!--触发事件使用My97DatePicker日期组件 -->

     <font color="green">Pick Date:</font><input type="text"  onClick="WdatePicker()" readonly="readonly">

</body>

</html>>

效果图：

方式二：使用MyCustomDatePicker

PickDdate.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="pick date!">

    <meta name="keywords" content="javascript,html,css">

    <!-- 引入使用自定义的日期组件的就是文件 -->

    <script type="text/javascript" src="MyCustomDatePicker/Calendar.js"> </script> 

    <title>日期选择器的使用</title>

</head>

<body>

    <!-- 触发事件使用日期组件 -->

    <font color="red">Pick Date:</font><input type="text" onclick="fPopCalendar(event,this,this)" readonly="readonly">

</body>

</html>>

效果图：

完整代码下载：http://files.cnblogs.com/files/XYQ-208910/pickDate.zip

JavaScript：日期选择器组件的使用的更多相关文章

  1. Flutter中的日期、格式化日期、日期选择器组件

    Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...

  2. JavaScript 日期选择器 Pikaday

    找一些插件的过程实在太痛苦了...好容易找到一个,赶紧记录下.免得以后重复浪费时间在这上面. 插件名:Pikaday github地址:https://github.com/dbushell/Pika ...

  3. vue element-ui 日期选择器组件 日期时间格式化

    vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...

  4. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

  5. uni-app中组件picker的基本使用（日期选择器为例）

    例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...

  6. JavaScript日期对象使用总结

    javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date(& ...

  7. 日期选择器：jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  8. Js日期选择器并自动加入到输入框中

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  9. Android自己定义DataTimePicker（日期选择器）

    Android自己定义DataTimePicker(日期选择器)  笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...

随机推荐

  1. 【C语言】06-基本数据类型

    C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle都是C语言写的. C语言的数据类型大致可以分为下图中的几类: 回到顶部 一.变量 跟其他语言一样,C语言中用变量来存储计算过程 ...

  2. _jobdu_1002

    /************************************************************************/ /* 题目1002:Grading 时间限制:1 ...

  3. 导航栏下a标签失效的原因

    前天我一直没找到失效的结果,就在刚才,我用不同的浏览器打开我编写的网页,有一个浏览器的图片循环播放效果错位了,我觉得就是它上边的div把他挤下来了.正如前天网上看到的高手的们的说法.我用firebug ...

  4. php 的curl 模拟登陆

    做一个类似这样的web 应用. 1,解决掉验证码 其实这是正方的一个小bug,当我们进入登陆界面时,浏览器会去请求服务器,服务器会生成一个验证码图片.如果我们不去请求这个图片,那么正方后台也不会生成相 ...

  5. nova.conf部分参数解析

    #----------networking options---------------# #nova的dhcpbridge配置的文件位置 --dhcpbridge_flagfile=/etc/nov ...

  6. centeros iptable模板文件

    iptables规则是空的.而且他们的selinux是关闭了的,这等同于把系统裸奔(总比windows裸奔好).   使用方法: 1.用root用户登录后 vi /etc/sysconfig/ipta ...

  7. 初学者对Spring MVC的认识

    首先是要一定说明的是,这倒是说明是什么?对吧Spring MVC 是SpringFrameWork的后续产品,并且已经融入到Spring Web Flow中同时Spring MVC 分离了控制器,模型 ...

  8. java的Arrays工具类实战

    java.util.Arrays类能方便地操作数组,它提供的所有方法都是静态的.静态方法是属于类的,不是属于类的对象.所以可以直接使用类名加方法名进行调用.Arrays作为一个工具类,能很好的操作数组 ...

  9. setInterval 启用和停止，见代码

    <title></title>    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="t ...

  10. Yii源码阅读笔记（八）

    前面阅读了Yii2的两个基本类Object和Component,了解了Yii的三个重要概念属性.事件.行为,下面开始阅读Event类,Event类是所有事件类的基类: <?php /** * @ ...