首页 技术 正文
技术 2022年11月6日
0 收藏 324 点赞 513 浏览 1443 个字

前言:

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

用法:

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

效果图:

JavaScript:日期选择器组件的使用

方式二:使用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>>

效果图:

JavaScript:日期选择器组件的使用

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902