前言：

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

用法：

使用日期在选择其组件其实很简单，我们只需要在*.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. javascript 三个 对话框

    用法: 一般写在 </html>之后,<script language="javascript">代码必须放在这里面</script> 三个常用 ...

  2. mysql安装后的配置

    mysql的安装其实就是一步一步按提示就可以: 1.开始安装 2.选择mysql安装位置 3.选择数据库存放位置,最好和mysql安装在一起,好查找 4.选择详细设置 5.选开发者机器 6.选多功能型 ...

  3. mysql时该如何估算内存的消耗，公式如何计算？

    经常有人问配置mysql时该如何估算内存的消耗.那么该使用什么公式来计算呢? 关心内存怎么使用的原因是可以理解的.如果配置mysql服务器使用太少的内存会导致性能不是最优的;如果配置了太多的内存则会导 ...

  4. php如何把文件上传到服务器上

    conn.php: <?php $id=mysql_connect('localhost','root','root'); mysql_select_db("db_database12 ...

  5. PHP对于Session漏洞的防范

    目前,基于PHP的网站开发已经成为目前网站开发的主流,本文笔者重点从PHP网站攻击与安全防范方面进行探究,旨在减少网站漏洞,希望对大家有所帮助! 一.常见PHP网站安全漏洞 对于PHP的漏洞,目前常见 ...

  6. mongodb复制集配置

    #more /opt/mongodb3.0/mongodb_im_conf_47020/mongodb3.0_im_47020.cnf dbpath = /opt/mongodb3.0/mongodb ...

  7. JavaScript系列：replace()函数(第二个参数为函数)

    语法 stringobject.replace(regexp/substr,replacement) 只讲解这个:参数replacement为函数时,这个参数函数的参数代表的意义,以及运行次数,及过程 ...

  8. Javascript 笔记与总结（2-12）联动菜单

    联动菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. jQuery 图片剪裁插件初探之 Jcrop

    主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

  10. nginx 配置文件分析以及配置负载均衡器

    修改Nginx核心配置文件nginx.conf # cat /usr/local/nginx/conf/nginx.conf user www www; worker_processes ; # 工作 ...