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 相关文章推荐
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
前端分页功能的实现以及原理(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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHPMailer发送邮件
2016/12/28 PHP
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python 创建一维的0向量实例
2019/12/02 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
环境保护与污染治理求职信
2014/07/16 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB