JQuery Datetime选择器 - 只需要选择月份和年份 [英] JQuery Datetime picker - Need to pick month and year only
问题描述
我浏览了这个帖子 http://stackoverflow.com/问题/ 2208480 / jquery-date-picker-to-show-month-year-only ，这对我来说非常有帮助，以便劫持datetime选择界面以适应我的情况。但因为我有相同的形式在几个日期时间选择器，发生这种情况。 css显示：none是旨在隐藏不显示的日子。但是如果我在同一个表单上有几个datetime选择器，但只有一个我希望使其中的一个月份号码，我该如何实现呢？随着css，它使所有datetime日历界面UI的所有日子消失，因为css将更改.ui-datepicker-calendar的属性。欢迎任何建议。谢谢。这是我的第一篇文章。
I went through this post http://stackoverflow.com/questions/2208480/jquery-date-picker-to-show-month-year-only which is very helpful to me in order to hack the datetime picker UI to suit my situation. 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. Thanks. This is my first post.
推荐答案
目前，datepicker每页只创建1个元素，所有datepicker输入共享，因此为什么答案的链接的问题是行不通的。 beforeShow事件不允许使用.addClass（）或.css（）编辑datepicker元素（因为元素结构在显示时从datepicker脚本中刷新。）
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.)
为了解决这个问题，我发现输入元素的焦点事件似乎在显示datepicker之后运行代码。这是一个令人沮丧的问题的简单解决方法。
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 Datetime选择器 - 只需要选择月份和年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
