首页
所有分类
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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 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
计时器(1) mysql.user(1) turtle(1) 定时任务(2) 三子棋(2) 绘图(1) MYSQL函数(1) Mysql报错(1) blinker(1) 信号库(1)
You might like
PHP 之 写时复制介绍（Copy On Write）
2014/05/13 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
js中根据字数截取字符串，不能截断url
2012/01/12 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
document.write的几点使用心得
2014/05/14 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
JQuery球队选择实例
2015/05/18 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
下一代Bootstrap的5个特点 超酷炫！
2016/06/17 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jquery延迟对象解析
2016/10/26 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
skyn ICELAND官网：冰岛成分天然护肤品
2020/08/24 全球购物
初中家长寄语
2014/04/02 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python