首页
所有分类
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 相关文章推荐
jQuery中get()方法用法实例
Dec 27 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
一个可复用的vue分页组件
May 15 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
如何利用js在两个html窗口间通信
Apr 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
dataBinding(1) 反射(1) Windows Server 2022(3) NTP(1) ip2region(1) Hive(5) RestTemplate(1) Windows Server(4) Quartz(1) HttpClient(1)
You might like
PHP新手上路（二）
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
srcElement表格样式
2006/09/03 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jquery URL参数判断，确定菜单样式
2010/05/31 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
微信小程序项目总结之记账小程序功能的实现（包括后端）
2019/08/20 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python实现简单的TCP代理服务器
2014/10/08 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python操作MongoDB详解及实例
2017/05/18 Python
python实现点对点聊天程序
2018/07/28 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
日本化妆品植村秀俄罗斯官方网站：Shu Uemura俄罗斯
2020/02/01 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
离职证明标准格式
2014/09/15 职场文书
小学运动会入场口号
2015/12/24 职场文书
python实现过滤敏感词
2021/05/08 Python
Go 语言结构实例分析
2021/07/04 Golang
java多态注意项小结
2021/10/16 Java/Android
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android