前端控件之Jquery datetimepicker的使用总结

时间：2024-03-12 20:59:30

效果图

　　在介绍jquery datetimepicker的使用方法前，我们先来看一下它的实现效果图，这样以便让你更快地了解它是否是你所需要的。

　　下面我截了四张常用的效果图（截取自http://xdsoft.net/jqplugins/datetimepicker )，另外在这里我只总结了几个常用的功能，如果你正在使用该控件，而本文没有写到的，请到上面网站上查看使用方法。

 使用方法　　

　　添加引用

 <link type="text/css" href="css/jquery.datetimepicker.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery.js"></script> 
 <script type ="text/javascript" src="js/jquery.datetimepicker.js"></script>

　　HTML

<input id="datetimepicker" type="text" >

　　javaScript

$(\'#datetimepicker\').datetimepicker();

　　按以上步骤我们就实现jquery datetimepicker的使用，当然这只是最基本的样式，另外jquery datetimepicker的样式控制是通过传一个json对象的参数给datetimepicker来实现的。下面我们举个例子来看下：

 $("#start").datetimepicker({ format: \'Y/m/d\', timepicker: false });

　　上面传入的参数就是用来设置显示日期的格式，以及弹出层只能选择日期，而不能选择时间。那我们接下来总结一下它常用的一些参数及其作用。

 常用参数

名称 默认值 描述 例子
value null 设置值 
{value:\'12.03.2013\', format:\'d.m.Y\'}
lang en

设置样式显示语言，

中文：ch\zh\zh-TW

 {lang:\'zh\'}
format Y/m/d H:i 日期格式（参考网站） 
{format:\'Y/m/d\'}
timepicker true 显示时间选择部分 
{timepicker:false}
datepicker  true 显示日期选择部分  {datepicker:false}
 weeks  false 显示周数  {weeks:true}
theme \'default\' 皮肤样式 
{theme:\'dark\'}
minDate false

设置可选择的最小日期（只有日期格式不包含时间部分才效）

 
{minDate:0}//今天
{minDate:\'2013/12/03\'}
{minDate:\'-1970/01/02\'}//昨天
 
 maxDate  false    {maxDate:0}  
minTime false   
{minTime:0}
{minTime:\'12:00\'}
maxTime false    
allowTimes [] 可供选择的时间点 
{allowTimes:[
  \'09:00\',
  \'11:00\',
  \'12:00\',
  \'21:00\']}
mask false   
{mask:\'9999/19/39\',format:\'Y/m/d\'}
{mask:true,format:\'Y/m/d\'}
 yearOffset  0  默认年分偏移值  ｛yearOffset:1}
inline false 是否直接显示日历控件  
todayButton true 是否显示"跳转至今天“的按钮  
defaultSelect true

当input为空时，高亮显示现在的日期或时间

  
validateOnBlur true

当控件失去焦点时，验证其值，如果没选择有效日期，则设置为现在的日期。

  
allowBlank false

是否允许设为空，即使validateOnBlur设置true，一样有效

  
onSelectDate

function(current_time

,$input){}

   
onSelectDate:function(ct,$i){
  alert(ct.dateFormat(\'d/m/Y\'))}
onSelectTime

function(current_time

,$input){}

   
onSelectDate:function(ct,$i){
  alert(ct.dateFormat(\'H:i\'))}
onShow

function(current_time

,$input){}

    
hours12  false 12小时制  
yearStart  1950 可选择的最小年份  
yearEnd  2050 可选择的最大年份  
roundTime  round

针对timepicker,可选择值: round, ceil, floor

  
dayOfWeekStart 0    
disabledDates []   
{disabledDates: [\'01.01.2014\',\'02.01.2014\']
, formatDate:\'d.m.Y\'}
allowDates []    
allowDateRe  []  使用正则表达式

 {format:\'Y-m-d\',allowDateRe:

\'\d{4}-(03-31|06-30|09-30|12-31)\' }

 一种常用场景下的封装

　　在我们使用日期控件时有一种常用的场景，就是有一个开始时间和结束时间，而正常情况下开始时间不能晚于结束时间，也有一些情况下，开始时间是不能晚于今天。所以我封装了这个功能：

复制代码
 1 var modal = (function() {
 2     var initDate = function(startDateTimeId,endDateTimeId) {
 3         var startDate;
 4         var endDate;
 5         startDateTimeId="#"+startDateTimeId;
 6         endDateTimeId="#"+endDateTimeId;
 7         $(startDateTimeId).datetimepicker({
 8             format: \'Y-m-d H:m\',
 9             minDate: 0,
10             onChangeDateTime: function(dp, $input) {
11                 startDate = $(startDateTimeId).val();
12             },
13             onClose: function(current_time, $input) {
14                 if (startDate > endDate) {
15                     $(startDateTimeId).val(endDate);
16                      startDate=endDate;
17                 }
18             }
19         });
20         $(endDateTimeId).datetimepicker({
21             format: \'Y-m-d H:m\',
22             onClose: function(current_time, $input) {
23                 endDate = $(endDateTimeId).val();
24                 if (startDate > endDate) {
25                     $(endDateTimeId).val(startDate);
26                     endDate=startDate;
27                 }
28             }
29         });
30     }; 
31     return {
32         initDate: initDate
33     };34 
35 })();
复制代码

　　js

//初始化开始时间与结束时间控件
modal.initDate("startdate","enddate");

 　　HTML

复制代码
 <label>开始时间：</label>
 <input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" />
 <label>结束时间</label>
 <input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" />
复制代码

 

结束语

　　在网上下载的js文件，在我本地测试时是有问题的，所以我把我现在正在用的js文件上传一份在这里，如果你有需要的话可以在这里下载。

相关文章