有心就有方向 2013-08-12
需要提前引入jquery ui 相关的包
1.不带时分秒的日期控件,而且可以控制其开始日期的选择只能在结束日期的前面,结束日期的选择只能在开始日期的后面
开始日期<input id="startDate" name="startDate" readonly="readonly" />
结束日期<input id="endDate" name="endDate" readonly="readonly"/>
function initDate(startDate,endDate){
$(startDate).datepicker( "destroy" );
$(endDate).datepicker( "destroy" );
$(startDate).datepicker({
changeMonth: true,
changeYear: true,
showMonthAfterYear:true,
dateFormat: 'yy-mm-dd',
onSelect:function(dateText,inst)
{
var arys = new Array();
var arys = dateText.split('-');
$(endDate).datepicker('option','minDate',new Date(arys[0],arys[1]-1,arys[2]));
}
});
$(endDate).datepicker({
changeMonth: true,
changeYear: true,
showMonthAfterYear:true,
dateFormat: 'yy-mm-dd' ,
onSelect:function(dateText,inst)
{
var arys = new Array();
var arys = dateText.split('-');
$(startDate).datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));
}
});
}
2.带时分秒的日期控件,与上面的日期控件有相同的功能
首先引入jquerytimepicker包
声明变量
var myControl= {
create: function(tp_inst, obj, unit, val, min, max, step){
$('<input class="ui-timepicker-input" value="'+val+'" style="width:50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function(e,ui){ // key events
// don't call if api was used and not key press
if(e.originalEvent !== undefined)
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function(e,ui){ // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function(tp_inst, obj, unit, opts, val){
if(typeof(opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function(tp_inst, obj, unit, val){
if(val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
function initDate(startDate,endDate){
$(startDate).datetimepicker( "destroy" );
$(endDate).datetimepicker( "destroy" );
$(startDate).datetimepicker({
controlType: myControl,
onSelect:function(dateText,inst)
{
var arys = new Array();
// 日期的字串格式为2013-08-15 00:00
var arys = dateText.split('-');
// 分割15 00:00 得到15
var dayAndTime = arys[2].split(' ');
$(endDate).datetimepicker('option','minDate',new Date(arys[0],arys[1]-1,dayAndTime[0]));
}
});
$(endDate).datetimepicker({
controlType: myControl,
onSelect:function(dateText,inst)
{
var arys = new Array();
var arys = dateText.split('-');
var dayAndTime = arys[2].split(' ');
$(startDate).datetimepicker('option','maxDate',new Date(arys[0],arys[1]-1,dayAndTime[0]));
}
});
}