同一页面上的两个 jQuery 日期选择器具有不同的 CSS 样式
Two jQuery datepicker on the same page with different CSS style
我正在尝试在同一页面上实现几个jQuery日期选择器,不同之处在于其中一个将使用jQuery UI DatePicker的建议解决方案成为月份选择器,以仅显示月份年份(或...http://jsfiddle.net/DBpJe/7722/)
关键是,如果我将以下 CSS 代码添加到我的 CSS 文件中,隐藏了选择日期的能力......然后这两个日历隐藏了选择日期的能力,而不仅仅是我需要的日期......似乎这是一种全有或全无的方法
.ui-datepicker-calendar {
display: none;
}
有没有办法与普通的日期选择器和我创建的自定义月份选择器(基于 jQuery 日期选择器)区分开来?
这是我的 HTML..
<input type="text" size="12" name="codeFlowDate" id="MyDate" class="text" />
<input type="text" size="12" name="codeFlowDate" id="MyMonth" class="text" />
这是 JS
$(function() {
$('#MyDate').datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
//showButtonPanel: true,
maxDate: +0,
});
});
$(function() {
$('#MyMonth').datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
maxDate: +0,
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
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)).trigger('change');
$('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
}
},
beforeShow: function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length - 4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
$(this).datepicker('setDate', new Date(year, month - 1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
谢谢!
编辑看到回复后...
我已经在我的代码中添加了这样的东西,但什么也没发生......
$(function() {
$('#MyMonth').datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
maxDate: +0,
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
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)).trigger('change');
$('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date
}
},
beforeShow: function(input, inst) {
$('.ui-datepicker-calendar').removeClass();
}
})
我注意到.ui-datepicker-calendar在HTML中是这样定义的。
表类=UI-日期选取器-日历
使用选择器 #id .datepickerClass 将不起作用,因为日期选择器div 是在输入之外创建的。您必须使用 beforeShow 将类设置为日历div:
$('input').datepicker({
beforeShow: function(input, inst) {
$('#ui-datepicker-div').removeClass(function() {
return $('input').get(0).id;
});
$('#ui-datepicker-div').addClass(this.id);
}
});
看看这篇文章
相关文章:
- jQuery位置选择器输入样式背景和焦点
- 覆盖eonasdan日期时间选择器中禁用日期的样式
- 如何设置'样式:color'淘汰赛中的颜色选择器.JS
- 组合悬停和焦点选择器样式,但不能同时使用
- 将 ID 选择器注入样式
- 日期选择器和 CSS 样式
- 选择一个 CSS 选择器来动态设置元素的样式 ::before
- 为什么 CSS 选择器只设置第一个匹配 svg 路径的样式
- CSS 样式被覆盖 - 选择器不够具体
- 如何更改 jquery UI 数据选择器的样式 (CSS)
- JQuery UI 日期选择器更改一天的样式
- Fuelux-日期选择器样式无法正常工作
- 动态更改jQuery选择器内部的样式
- 设置对话框样式时,我使用什么作为选择器
- 引导选择选取器样式不起作用
- 动画选择器到它的原始样式,坏或OK
- 如何动态改变jquery日期选择器样式
- cssRule对象在样式表中没有返回id选择器样式
- :焦点伪选择器样式不会被删除,当一个新的选项卡打开,即使模糊事件被触发
- 修改sencha中的CSS psuedo选择器样式