JavaScript：日期选择器组件的使用
前言：
在实际项目开发中，日期选择是一个十分常见而且重要的问题，在表单中设计到日期的验证时，如果让用户自己输入时间的话，那么使用正则进行验证其正确性是不可取的，因为他一般只能验证日期的格式，无法准确的验证其日期正确性。此时可以使用日期选择器组件来帮助我们完整。
用法：
使用日期在选择其组件其实很简单，我们只需要在*.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：日期选择器组件的使用的更多相关文章
- Flutter中的日期、格式化日期、日期选择器组件
Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...
- JavaScript 日期选择器 Pikaday
找一些插件的过程实在太痛苦了...好容易找到一个,赶紧记录下.免得以后重复浪费时间在这上面. 插件名:Pikaday github地址:https://github.com/dbushell/Pika ...
- vue element-ui 日期选择器组件 日期时间格式化
vue element-ui 组件开发大大提高了我们的效率,但有时候并不能满足我们的需求,例如时间,日期组件: element-ui 日期返回的格式是这样的,看下图: 但我们要的是另一个格式 , 如下 ...
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- uni-app中组件picker的基本使用（日期选择器为例）
例:需要在下图"自定义日期"中使用日期选择器 <template> <div> <picker mode="date" @chan ...
- JavaScript日期对象使用总结
javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date(& ...
- 日期选择器：jquery datepicker的使用
helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery datepicker jquery ui 在jquery ui中,提供了一个非常实用 ...
- Js日期选择器并自动加入到输入框中
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- Android自己定义DataTimePicker（日期选择器）
Android自己定义DataTimePicker(日期选择器) 笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...
随机推荐
- [转帖] CvMat，Mat和IplImage之间的转化和拷贝
原文地址: http://blog.csdn.net/holybin/article/details/17711013 在OpenCV中Mat.CvMat和IplImage类型都可以代表和显示图像. ...
- Linux系统管理员踢用户的方法
两种方法:1.使用pkill命令 1.1 通过who 或则 w 查看当前连接的用户 例如: w USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT jjony pts/0 ...
- 如何删除 OpenStack Nova 僵尸实例
转自:http://www.vpsee.com/2011/11/how-to-delete-a-openstack-nova-zombie-instance/ 前天强制重启一台 OpenStack N ...
- 用Editplus开发Java
☆ 准备工作 ①,已安装好jdk,同时配置系统变量(3个,JAVA_HOME,PATH,CLASSPATH) ②,电脑已安装Editplus,并做好设置. ☆ Editplus配置java开发环境 对 ...
- NBOJv2 1022 短信篮球（种类并查集）
Problem 1022: 短信篮球 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %lld ...
- myBatis应用
最近项目中使用myBatis(iBatis),所以目前对所遇的一些问题及有些模糊的地方在这里标注一下. 首先mybaits是一个“半自动化”的ORM框架. 需要使用的jar包:mybatis-3.0. ...
- 优雅的函数式编程--Clojure概述
欢迎转载,转载请注明出处,徽沪一郎. 楔子 由于阅读storm源码的原因,头一次接触到Clojure.没有花特别的时间来研究clojure语法,只是在一些特殊的用法时,才查了一下clojure官网的文 ...
- Redis 笔记与总结5 Redis 常用命令之 键值命令 和 服务器命令 && 高级应用之 安全性 和 主从复制
Redis 提供了丰富的命令对数据库和各种数据库类型进行操作,这些命令可以在 Linux 终端使用. 1. 键值相关命令: 2. 服务器相关命令 键值相关命令 ① keys 命令 返回满足给定 pat ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- pycharm使用笔记
Basic code completion (the name of any class, method or variable) control + 空格 # 代码补全,如果跟系统spotligh ...