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应该怎样学
Apr 16 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
最简单的tab切换实例代码
May 13 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
python迭代器与生成器详解
2016/03/10 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python os模块在系统管理中的应用
2020/06/22 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
好的演讲稿开场白
2013/12/30 职场文书
高三学习决心书
2014/03/11 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
换届选举主持词
2015/07/03 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript