前言：

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

用法：

使用日期在选择其组件其实很简单，我们只需要在*.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. [文字雲產生器] Tagxedo 把文字串成雲、變成畫，印在 T-Shirt、馬克杯、詩袋….

    http://www.tagxedo.com/app.html 有種東西叫「Word Clouds」,就是把一堆文字依照不同的大小.顏色.角度與位置拼湊在一起,讓他變成像一朵雲一般.組合成各種不同的形 ...

  2. ThinkPHP框架的部署

    1.将ThinkPHP框架的框架文件放到想要放置的地方,与创建的应用文件夹同级 2.vhost文件中设置虚拟目录 3.在hosts文件中配置 4.在应用目录中创建入口文件index.php 5.在入口 ...

  3. 用户提交的cookie提交时为什么传不到服务器

    cookie与session跨域登陆代码(ie6,ie7,firefox)frameset里面,也就是里面的frame是来自第三方站点(不同ip或不同域名),那么默认情况下ie会自动禁用这些站点的co ...

  4. Java下利用Jackson进行JSON解析和序列化

    Java下利用Jackson进行JSON解析和序列化   Java下常见的Json类库有Gson.JSON-lib和Jackson等,Jackson相对来说比较高效,在项目中主要使用Jackson进行 ...

  5. VSS错误自动修复

    公司项目开发源代码管理一直用vss,从vss6.0用到vss8.0(vss2005),在近两年的试用中碰到一些大大小小的问题:1:vss服务迁移,这个比较好办,直接将整个vss目录拷贝过去,加上相应的 ...

  6. [转自51CTO]ITIL与ISO20000的关系

    ITIL它不是一个服务管理标准,而更应该说是一种结构化的方法或流程框架.基于这种方法和框架,已经有越来越多的IT服务管理标准被开发出来了.在这些基于ITIL的IT服务管理标准中,最突出的要属英国标准B ...

  7. Oracle 10g安装64位图解流程

    1. 安装准备阶段 1.1 安装Oracle环境 本例使用X-Manager来实现与Linux系统的连接,本例使用的所有命令和操作都是在X-Manager下进行.X-Manager安装完成后的配置方法 ...

  8. DS实验题 Inversion

    题目: 解题过程: 第一次做这题的时候,很自然的想到了冒泡和选择,我交的代码是用选择写的.基本全WA(摊手). 贴上第一次的代码: // // main.cpp // sequenceschange ...

  9. 一台电脑安装两个xampp的方法

    如果一台机器已经有一个xampp..如果还需要安装另外一个不同版本的xampp(里面PHP,mysql不同版本之类的)用做测试.则可以安装绿色版(不需注册,解压就可用) 下载地址(第二个xampp只能 ...

  10. 自动更新开奖数据的excel文件，供大家下载

    自动更新开奖数据的excel文件,供大家下载 2010-03-14 20:22 228492人阅读打印来源:乐彩网 作者:eren 很多人拥有自制excel电子表格,常要更新最基本的开奖信息.如有多期 ...