软录 · 2024年10月12日

jqueryuiappendto|jquery ui datetimepicker 可以通过选择格式来更改时间格式吗如图所示

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>