A. jquery ui datetimepicker 可以通過選擇格式來更改時間格式嗎如圖所示。
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Demo</title>
<linkrel="stylesheet"href="ui/jquery-ui.css">
<linkrel="stylesheet"href="ui/jquery-ui-timepicker-addon.css">
<scriptsrc="jquery-1.js"></script>
<scriptsrc="ui/jquery-ui.js"></script>
<scriptsrc="ui/jquery-ui-timepicker-addon.js"></script>
<scriptsrc="ui/jquery-ui-datepicker-zh-CN.js"></script>
<scriptsrc="ui/jquery-ui-timepicker-zh-CN.js"></script>
<style>
.ui-datepicker{
font-size:0.5em;
}
</style>
<script>
jQuery(function(){
//日期格式選項設置
vardateFormats=['yy-mm-dd','yy/mm/dd'];
//時間格式選項設置
vartimeFormats=['HH:mm','HH:mm:ss','HH'];
//datetimepicker選項設置
varpickerOptions={};
vartimeInited=false;
vardateSel=jQuery('#format-date-picker');
vartimeSel=jQuery('#format-time-picker');
vardatetimeSel=jQuery('#format-datetime-picker');
varpicker=jQuery('#datetime-picker');
varchangePicker=function(df,tf){
varcd=picker.datetimepicker('getDate');
picker.datetimepicker('destroy').datetimepicker(jQuery.extend(pickerOptions,{
dateFormat:df,
timeFormat:tf
})).datetimepicker('setDate',cd);
};
jQuery.each(dateFormats,function(){
vardate=this;
jQuery('<Option>').text(date).appendTo(dateSel);
jQuery.each(timeFormats,function(){
vartime=this;
jQuery('<Option>').text([date,time].join('')).appendTo(datetimeSel);
if(timeInited)
returntrue;
jQuery('<Option>').text(time).appendTo(timeSel);
});
timeInited=true;
});
dateSel.change(function(){
vardv=dateSel.val();
vartv=timeSel.val();
datetimeSel.val([dv,tv].join(''));
changePicker(dv,tv);
});
timeSel.change(function(){
vardv=dateSel.val();
vartv=timeSel.val();
datetimeSel.val([dv,tv].join(''));
changePicker(dv,tv);
});
datetimeSel.change(function(){
vardtv=jQuery(this).val().split('');
dateSel.val(dtv[0]);
timeSel.val(dtv[1]);
changePicker(dtv[0],dtv[1]);
});
picker.datetimepicker(jQuery.extend(pickerOptions,{
dateFormat:dateFormats[0],
timeFormat:timeFormats[0]
}));
});
</script>
</head>
<body>
<inputtype="text"id="datetime-picker">
<selectname=""id="format-date-picker">
</select>
<selectname=""id="format-time-picker">
</select>
<selectname=""id="format-datetime-picker">
</select>
</body>
</html>