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

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

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
Javascript中this的用法详解
Sep 22 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 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
You might like
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
浅谈js中的bind
2019/03/18 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
超简单的Python HTTP服务
2019/07/22 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
中英文求职信范文
2014/01/27 职场文书
团代会主持词
2014/04/02 职场文书
小学班主任寄语大全
2014/04/04 职场文书
微电影大赛策划方案
2014/06/05 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
火锅店的活动方案
2014/08/15 职场文书
年会主持人开场白台词
2015/05/29 职场文书
可可西里观后感
2015/06/08 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书