jQueryDateTimePicker日期和时间插件示例-成都快上网建站

jQueryDateTimePicker日期和时间插件示例

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

成都创新互联公司专注于沙湾网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供沙湾营销型网站建设，沙湾网站制作、沙湾网页设计、沙湾网站官网定制、小程序制作服务，打造沙湾网络公司原创品牌,更为您提供沙湾网站排名全网营销落地服务。

日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等

文档和下载地址：

1、jQuery-Timepicker-Addon的下载地址：http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Addon_jb51.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://www.jb51.net/jiaoben/58.html

jquery 3.0 https://www.jb51.net/codes/35629.html

下面先看效果图：

引入js文件：

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});
      }
     );

完整代码：




 
  
  
  
  
  
  
  
  
  
  
 

 
  
  默认：
  
  

  

  控制到时分秒：
  

  
 控制到年月日：
  
  

  
 开始结束区间：
  

  ~
  

  
 时分秒选择：
  

  
  

  
 开始结束区间(第二种写法)：
  

  ~

代码的下载地址：http://xiazai.jb51.net/201701/yuanma/Test_Datepicker_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

本文题目：jQueryDateTimePicker日期和时间插件示例
网站地址：http://kswjz.com/article/jjgoph.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯