前言：

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

用法：

使用日期在选择其组件其实很简单，我们只需要在*.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. JAVA图片处理--缩放，切割，类型转换

    import java.io.*; import java.awt.*; import java.awt.image.*; import java.awt.Graphics; import java. ...

  2. vc中openGL的安装

    安装过程: 第一步:选择一个编译环境 现在Windows系统的主流编译环境有Visual Studio,Broland C++ Builder,Dev-C++等,它们都是支持OpenGL的.但这里我们 ...

  3. Grunt - 前端开发所见即所得

    首先要安装全局的grunt-cli sudo npm install grunt-cli -g 1,项目中初始化npm文件,项目名不要和[关键词]如grunt重复,一直回车即可 npm init 2, ...

  4. obout editor Absolute path for uploaded image

    本文转自:https://www.obout.com/editor_new/KnowledgeBase.aspx?id=706   Absolute path for uploaded image Q ...

  5. navicat从下载到使用

    ☆准备工作 确保电脑安装了mysql数据库 确定my.ini下的字符集设置为utf8 ☆下载navicat 输入网址 https://www.navicat.com 点击Downloads 点击Dow ...

  6. Nginx 配置 Basic 认证

    /* * 环境:LNMP(CentOS 6.6 + Nginx 1.8.0) */ 在 Nginx 下配置 Basic 认证需要依靠 Nginx 的 http_auth_basic_module 模块 ...

  7. PHP 设计模式 笔记与总结（9）数据对象映射模式

    [数据对象映射模式] 是将对象和数据存储映射起来,对一个对象的操作会映射为对数据存储的操作.例如在代码中 new 一个对象,使用数据对象映射模式就可以将对象的一些操作比如设置一些属性,就会自动保存到数 ...

  8. java list<int>报错

    请问一下在java中的List<int> list=new List<int>();这条语句的两个int处会报错,请问为什么? 答: 两处错误:第一:List是接口,需要实现类 ...

  9. 一些App的User-Agent

    天猫 Mozilla/5.0 (Linux; U; Android 4.4.4; zh-cn; MI 2C Build/KTU84P) AppleWebKit/537.36 (KHTML, like ...

  10. Introduction to Structured Data

    https://developers.google.com/search/docs/guides/intro-structured-data Structured data refers to kin ...