首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery DateTimePicker 日期和时间插件示例

Posted in Javascript onJanuary 22, 2017

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

文档和下载地址：

1、jQuery-Timepicker-Addon的下载地址：http://xiazai.3water.com/201701/yuanma/jQuery-Timepicker-Addon_3water.rar

2、jQuery-Timepicker-Addon的的文档地址：http://trentrichardson.com/examples/timepicker/

3、JQuery-UI下载地址：http://jqueryui.com/themeroller/

4、JQuery下载地址：

jquery(1.32-1.11.1-2.1.1) https://3water.com/jiaoben/58.html

jquery 3.0 https://3water.com/codes/35629.html              

下面先看效果图：

引入js文件：

<script src="js/jquery-3.1.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />

1、默认的效果：

jQuery DateTimePicker 日期和时间插件示例

关键代码：

$("#defult").datetimepicker();

2、控制到时分秒：

jQuery DateTimePicker 日期和时间插件示例

关键代码：

$('#date').prop("readonly", true).datetimepicker({
      timeText: '时间',
      hourText: '小时',
      minuteText: '分钟',
      secondText: '秒',
      currentText: '现在',
      closeText: '完成',
      showSecond: true, //显示秒 
      timeFormat: 'HH:mm:ss' //格式化时间 
     });

3、控制到年月日

jQuery DateTimePicker 日期和时间插件示例

关键代码：

$("#date_yy-mm-dd").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {

      }

     });

4、开始结束区间

jQuery DateTimePicker 日期和时间插件示例

jQuery DateTimePicker 日期和时间插件示例

关键代码：

$("#date_start").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {
       $("#date_end").datepicker("option", "minDate", selectedDate);
      }
     });

     $("#date_end").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {
       $("#date_start").datepicker("option", "maxDate", selectedDate);
       $("#date_end").val($(this).val());
      }
     });

5、时分秒选择：

jQuery DateTimePicker 日期和时间插件示例 

关键代码： 

$('#date_hhmmss').prop("readonly", true).timepicker({
      timeText: '时间',
      hourText: '小时',
      minuteText: '分钟',
      secondText: '秒',
      currentText: '现在',
      closeText: '完成',
      showSecond: true, //显示秒 
      timeFormat: 'HH:mm:ss' //格式化时间 
     });

6、开始结束区间(第二种写法)：

jQuery DateTimePicker 日期和时间插件示例 

jQuery DateTimePicker 日期和时间插件示例   

关键代码：

$.timepicker.dateRange(
      $("#date_start_1"),
      $("#date_end_1"), {
       minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
       maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
       start: {}, // start picker options
       end: {} // end picker options});
      }
     );

完整代码：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title></title>
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
  <script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
  <script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
  <link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
  <script type="text/javascript">
   (function($) {

    $(function() {
     $.datepicker.regional['zh-CN'] = {
      changeMonth: true,
      changeYear: true,
      clearText: '清除',
      clearStatus: '清除已选日期',
      closeText: '关闭',
      closeStatus: '不改变当前选择',
      prevText: '<上月',
      prevStatus: '显示上月',
      prevBigText: '<<',
      prevBigStatus: '显示上一年',
      nextText: '下月>',
      nextStatus: '显示下月',
      nextBigText: '>>',
      nextBigStatus: '显示下一年',
      currentText: '今天',
      currentStatus: '显示本月',
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      monthStatus: '选择月份',
      yearStatus: '选择年份',
      weekHeader: '周',
      weekStatus: '年内周次',
      dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
      dayStatus: '设置 DD 为一周起始',
      dateStatus: '选择 m月 d日, DD',
      dateFormat: 'yy-mm-dd',
      firstDay: 1,
      initStatus: '请选择日期',
      isRTL: false
     };

    });

    $(function() {

     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
     
     $("#defult").datetimepicker();
     
     $('#date').prop("readonly", true).datetimepicker({
      timeText: '时间',
      hourText: '小时',
      minuteText: '分钟',
      secondText: '秒',
      currentText: '现在',
      closeText: '完成',
      showSecond: true, //显示秒 
      timeFormat: 'HH:mm:ss' //格式化时间 
     });

     $("#date_yy-mm-dd").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {

      }

     });

     $("#date_start").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {
       $("#date_end").datepicker("option", "minDate", selectedDate);
      }
     });

     $("#date_end").prop("readonly", true).datepicker({
      changeMonth: true,
      dateFormat: "yy-mm-dd",
      onClose: function(selectedDate) {
       $("#date_start").datepicker("option", "maxDate", selectedDate);
       $("#date_end").val($(this).val());
      }
     });

     $('#date_hhmmss').prop("readonly", true).timepicker({
      timeText: '时间',
      hourText: '小时',
      minuteText: '分钟',
      secondText: '秒',
      currentText: '现在',
      closeText: '完成',
      showSecond: true, //显示秒 
      timeFormat: 'HH:mm:ss' //格式化时间 
     });

     $.timepicker.dateRange(
      $("#date_start_1"),
      $("#date_end_1"), {
       minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
       maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
       start: {}, // start picker options
       end: {} // end picker options});
      }
     );
     
     
    });
    
    
   }(jQuery));
  </script>
 </head>

 <body>
  
  默认：
  <input id="defult" />
  <br/>
  <br />
  控制到时分秒：<input id="date" />
  <br />
  <br /> 控制到年月日：
  <input id="date_yy-mm-dd" />
  <br />
  <br /> 开始结束区间：
  <br />
  <input id="date_start" />~<input id="date_end" />
  <br />
  <br /> 时分秒选择：
  <br />
  <input id="date_hhmmss" />
  <br />
  <br /> 开始结束区间(第二种写法)：
  <br />
  <input id="date_start_1" />~<input id="date_end_1" />
 </body>

</html>

代码的下载地址：http://xiazai.3water.com/201701/yuanma/Test_Datepicker_3water.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery DateTimePicker 日期和时间插件示例

- Author -

linYongJie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
Javascript实现单例模式
Jan 24 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
Angularjs过滤器使用详解
May 25 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
前端分页功能的实现以及原理（jQuery）
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
R71E(1) R9700(1) DE1102(1) R72E(1) 胆机(1) DE1107(3) SONY600GR(1) ICOM(2) WR-800F(1) DE1105(1)
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
jquery 图片 上一张 下一张 链接效果（续篇）
2010/04/20 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
深入理解vue中的$set
2017/06/01 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
零基础学Python（一）Python环境安装
2014/08/20 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Django实现简单的分页功能
2021/02/22 Python
什么是设计模式
2012/06/17 面试题
实习单位推荐信范文
2013/11/27 职场文书
学习型班组申报材料
2014/05/31 职场文书
暑期教师培训方案
2014/06/07 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
建国大业观后感
2015/06/01 职场文书