jquery ui datetimepicker 可以通过选择格式来更改时间格式吗？如图所示。
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="ui/jquery-ui.css">
<link rel="stylesheet" href="ui/jquery-ui-timepicker-addon.css">
<script src="jquery-1.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="ui/jquery-ui-timepicker-addon.js"></script>
<script src="ui/jquery-ui-datepicker-zh-CN.js"></script>
<script src="ui/jquery-ui-timepicker-zh-CN.js"></script>
<style>
.ui-datepicker{
font-size: 0.5em;
}
</style>
<script>
jQuery(function(){
// 日期格式选项设置
var dateFormats = ['yy-mm-dd','yy/mm/dd'];
// 时间格式选项设置
var timeFormats =['HH:mm','HH:mm:ss','HH'];
// datetimepicker 选项设置
var pickerOptions = {};
var timeInited = false;
var dateSel = jQuery('#format-date-picker');
var timeSel = jQuery('#format-time-picker');
var datetimeSel = jQuery('#format-datetime-picker');
var picker = jQuery('#datetime-picker');
var changePicker = function(df,tf){
var cd = picker.datetimepicker('getDate');
picker.datetimepicker('destroy').datetimepicker(jQuery.extend(pickerOptions,{
dateFormat:df,
timeFormat:tf
})).datetimepicker('setDate',cd);
};
jQuery.each(dateFormats,function(){
var date = this;
jQuery('<Option>').text(date).appendTo(dateSel);
jQuery.each(timeFormats,function(){
var time = this;
jQuery('<Option>').text([date,time].join(' ')).appendTo(datetimeSel);
if(timeInited)
return true;
jQuery('<Option>').text(time).appendTo(timeSel);
});
timeInited = true;
});
dateSel.change(function(){
var dv = dateSel.val();
var tv = timeSel.val();
datetimeSel.val([dv,tv].join(' '));
changePicker(dv,tv);
});
timeSel.change(function(){
var dv = dateSel.val();
var tv = timeSel.val();
datetimeSel.val([dv,tv].join(' '));
changePicker(dv,tv);
});
datetimeSel.change(function(){
var dtv = 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>
<input type="text" id="datetime-picker">
<select name="" id="format-date-picker">
</select>
<select name="" id="format-time-picker">
</select>
<select name="" id="format-datetime-picker">
</select>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
初始化datepicker的时候不是有个配置函数里面可以设置时间日期格式吗？把它定义为变量，在select的chang时间中改变这个变量不就可以了吗
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
