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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript中createElement的两种创建方式
2015/05/14 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python 从相对路径下import的方法
2018/12/04 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
树莓派实现移动拍照
2019/06/22 Python
python通过实例讲解反射机制
2019/10/17 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
Python中如何定义一个函数
2016/09/06 面试题
2014最新自愿离婚协议书范本
2014/11/19 职场文书
员工年终考核评语
2014/12/31 职场文书
皇城相府导游词
2015/02/06 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书