JQuery 日期时间选择器 - 只需要选择月份和年份 [英] JQuery Datetime picker - Need to pick month and year only
问题描述
我浏览了这篇文章 jQuery UI DatePicker 只显示月份年份 这对我非常有帮助，可以破解日期时间选择器 UI 以适应我的情况.
I went through this post jQuery UI DatePicker to show month year only which is very helpful to me in order to hack the datetime picker UI to suit my situation.
但是由于我在同一个表单上有多个日期时间选择器，所以会发生这种情况.css display:none 旨在隐藏"不显示的日子.但是，如果我在同一个表单上有多个日期时间选择器，但只有一个我希望将其作为一个月份选择器，我该如何实现呢?使用 thw css，它会使所有日期时间日历 UI 上的所有日子消失，因为 css 将更改 .ui-datepicker-calendar 的属性.欢迎提出任何建议.
But as I have several datetime picker on the same form, this happens. The css display:none is aim to 'hide' the days not to be shown. But if I have several datetime picker on the same form but only one I wish to make one of it monthpicker, how can I achieve that? With thw css, it makes all the days on the all datetime calender UI disappear since the css will change the attribute of .ui-datepicker-calendar. Any suggestions are welcome.
推荐答案
目前，datepicker 每页只创建 1 个所有 'datepicker' 输入共享的元素，因此为什么链接问题的答案不起作用.beforeShow 事件不允许使用 .addClass() 或 .css() 编辑日期选择器元素(因为元素结构在显示时从日期选择器脚本刷新.)
Currently, datepicker creates only 1 element per page that all 'datepicker' inputs share, hence why the answer to the linked question does not work. The beforeShow event does not allow editing the datepicker element with .addClass() or .css() (as the element structure is refreshed from the datepicker script when it shows.)
为了解决这个问题，我发现输入元素的焦点事件似乎在显示日期选择器之后运行代码.这是解决令人沮丧的问题的简单方法.
To get around this, I found that the focus event for the input element appears to run code after the datepicker is shown. It is a simple workaround to a frustrating problem.
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.month-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
$('.date-picker').datepicker();
$('.month-picker').focus(function () {
$('.ui-datepicker-calendar').addClass('hideDates');
});
});
</script>
<style>
.hideDates {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date:</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="endMonth">End Month:</label>
<input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>
这篇关于JQuery 日期时间选择器 - 只需要选择月份和年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
