开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5839865.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一步一步实现ATL开发的ActiveX组件与javascript的交互(一)
1.      打开VS2008,单击起始页中的“New Project…”,选择“ATL”分类下的“ATL Project”项目,项目名称为“ATLtest”。在随后出现的项目向导中,使用默认配置即可。
1321 0
ActiveX组件与JavaScript交互
1.在COM组件中调用JavaScript函数// 连接点方式页面javascript脚本        alert("State(" + s + ")");        return 123;        testCom.
945 0
求商品SKU的所有组合(笛卡尔积)-js和php实现版
求商品SKU的所有组合(笛卡尔积)-js和php实现版
13 0
js:富文本编辑器实现@某人
js:富文本编辑器实现@某人
26 0
如何用原生JS实现跑马灯效果
如何用原生JS实现跑马灯效果
23 0
js: 在chrome中实现复制到剪贴板
js: 在chrome中实现复制到剪贴板
50 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1249 0
用JavaScript实现网页动态水印
原文:用JavaScript实现网页动态水印 1.基本原理 页面加载后,通过javascript创建页面元素div,并在div元素中创建文本节点,展示水印内容 设置div元素样式,将其zIndex设置一个较高的值,并设置透明度,实现浮在页面的水印效果 其核心逻辑如下所示 var mask_div = document.
1053 0
Javascript实现网页上的多级菜单(竖着)
使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption
1098 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
JavaScript 语言在引擎级别的执行过程
立即下载
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载