zoukankan      html  css  js  c++  java
  • 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

    程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
  • 相关阅读:
    hdu 5352 匈牙利(多重匹配)
    hdu 2112 最短路+stl
    hdu 1811 拓扑排序+并查集+细心
    hdu5407 CRB and Candies
    hdu1018 Big Number
    hdu5410 CRB and His Birthday
    hdu1023 Train Problem II
    hdu4812 D Tree
    hdu1085 Holding Bin-Laden Captive!
    hdu4810 Wall Painting
  • 原文地址:https://www.cnblogs.com/zhuyuewei/p/6412509.html
Copyright © 2011-2022 走看看