前言：

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

用法：

使用日期在选择其组件其实很简单，我们只需要在*.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. swift -- 学习记录

    先把疯狂的swift这本书大致看了一遍 2016.7.13 因为实在是太闲,所以决定把公司的应用用swift写一遍 然后顺便看看swift的官方文档 这里有一个官文的中文翻译,感动啊 http://w ...

  2. 使用LTT升级HP磁带机的固件程序

    下载后将软件包解压 解压后,进入该文件夹可以看到固件程序     将所有固件程序拷贝至LTT软件安装目录下的firmware文件夹中 C:\Program Files\HP StorageWorks ...

  3. 使用Eclipse自带的Axis1插件生成WSDL文件

    首先创建一个web工程,创建过程如下: 如果选择Apache Tomcat v5.5,Dynamic web module version最高只能选择2.4,填写完成后点击“下一步”: 填写默认输出文 ...

  4. c#是否参入中间变量交换变量的几种方法

    大家很熟悉知道,交换变量经常的使用的一种方法是使用第三个变量,也符合正常人的思维逻辑,但是还有其他的一些方法来实现,但是有点“偏门”,记住就好了.下面就列举这几种方法. 第一种方法,会用到参数的方法再 ...

  5. 我写了一个java实体类,implements了Serializable接口,然后我如何让serialversionUID自动生成

    写了一个java实体类,implements了Serializable接口,让serialversionUID自动生成方法: 1.点击类旁边的警告符号: 2.选择Add generated seria ...

  6. visual 2008中error PRJ0003 : 生成 cmd.exe 时出错

    visual 2008中error PRJ0003 : 生成 cmd.exe 时出错”,   和vs2008 sp1没关系 解决方案:工具—>选项—>项目和解决方案—>VC++目录, ...

  7. Linux 执行ThinkPHP 文件的计划任务

    执行例如 http://192.168.1.32/index.php?s=/Home/Cron/yue 这样的 url 的计划任务 方式① */ * * * * curl http://192.168 ...

  8. Navicat for MySQL数据库管理工具

    官网下载地址:http://www.navicat.com/download/navicat-for-mysql  //如图所示成功建立连接 Host Nmae/Ip Adress:localhost ...

  9. WCF Basic Concept

    http://msdn.microsoft.com/library/ee354180.aspx Steps: Designing a Service Contract Implementing a W ...

  10. Subset sum problem

    https://en.wikipedia.org/wiki/Subset_sum_problem In computer science, the subset sum problem is an i ...