jQuery DateTimePicker 日期和时间插件示例

更新时间：2017年01月22日 17:01:15 作者：linYongJie

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，这篇文章主要介绍了jQuery DateTimePicker 日期和时间插件示例，有兴趣的可以了解一下。

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

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

文档和下载地址：

1、jQuery-Timepicker-Addon的下载地址：http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Addon_jb51.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://www.jb51.net/jiaoben/58.html

jquery 3.0 https://www.jb51.net/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、默认的效果：

关键代码：

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

2、控制到时分秒：

关键代码：

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

3、控制到年月日

关键代码：

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

      }

     });

4、开始结束区间

关键代码：

  $("#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、时分秒选择：

关键代码：

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

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

关键代码：

$.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.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar

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

您可能感兴趣的文章:

jQuery 跨域访问问题解决方法
浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题.
2009-12-12
jQuery实现ajax的叠加和停止(终止ajax请求)
这篇文章主要介绍了jQuery实现ajax的叠加和停止的关键代码，代码简单易懂，需要的朋友可以参考下
2016-08-08
jquery ajax跨域解决方法(json方式)
本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jQuery调用WebMethod(PageMethod) NET2.0的方法
这篇文章主要介绍了jQuery调用WebMethod(PageMethod) NET2.0的方法,结合实例形式分析了jQuery基于ajax调用.NET方法的相关技巧,需要的朋友可以参考下
2016-04-04
jquery实现有过渡效果的tab切换
这篇文章主要为大家详细介绍了jquery实现有过渡效果的tab切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
jQuery实现DIV层淡入淡出拖动特效的方法
这篇文章主要介绍了jQuery实现DIV层淡入淡出拖动特效的方法,涉及jQuery针对鼠标操作的常用技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
基于jquery css3实现点击动画弹出表单源码特效
这篇文章主要介绍了基于jquery css3实现点击动画弹出表单,弹出的表单没有任何遮盖层，在web前端程序开发中经常会用到，需要的朋友可以参考下
2015-08-08
jQuery实现可以编辑的表格实例详解【附demo源码下载】
这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
2016-07-07
jQuery实现的登录浮动框效果代码
这篇文章主要介绍了jQuery实现的登录浮动框效果代码,点击登陆链接可弹出悬浮登录框,涉及jQuery中show与hide方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
通过XMLHttpRequest和jQuery实现ajax的几种方式
AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。而，XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式
2015-08-08

jQuery DateTimePicker 日期和时间插件示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具