我正在尝试编写一个自定义日期选择器,其中月份和年份范围的默认下拉菜单(通过 changeMonth
和 changeYear
选项启用)被自定义下拉菜单替换.它是这样的:
fiddle :http://jsfiddle.net/gGV3v/
$("#myId").datepicker({
...default settings...
beforeShow: function() {
...here I replace the default dropdowns by custom dropdowns...
...something like...
$(".ui-datepicker-month").replaceWith("#custom-html-block");
$(".ui-datepicker-year").replaceWith("#another-custom-html-block");
}
});
从自定义下拉列表中选择月份或年份时,我想相应地更改 View 中的日期。所以我从当前的月份和年份构造日期字符串(新月份/年份组合的日期在这里默认为 1),然后调用
$("#custom-html-block .custom-dropdown-option").on("click",function() {
...construct newDateString...
$("#myId").datepicker("setDate",newDateString)
});
$("#another-custom-html-block .custom-dropdown-option").on("click",function() {
...construct newDateString...
$("#myId").datepicker("setDate",newDateString)
});
我希望带有文本 foo 的 span
在单击时以编程方式设置新日期时保持不变。
问题是:它擦掉了自定义下拉菜单,默认下拉菜单又出现了。我试着做这样的事情:
$("#myId").datepicker($.extend({setDate: newDateString},oldSettings))
但是还是不行。我该如何进行这项工作?
最佳答案
您可以设置函数 $.datepicker._generateMonthYearHeader
的值,缺点是页面中的所有日期选择器都是全局的。
示例如下:
$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {
var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
changeMonth = this._get(inst, "changeMonth"),
changeYear = this._get(inst, "changeYear"),
showMonthAfterYear = this._get(inst, "showMonthAfterYear"),
html = "<div class='ui-datepicker-title'>",
monthHtml = "";
// year selection
if ( !inst.yearshtml ) {
inst.yearshtml = "";
if (secondary || !changeYear) {
html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
} else {
// determine range of years to display
years = this._get(inst, "yearRange").split(":");
thisYear = new Date().getFullYear();
determineYear = function(value) {
var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
year = determineYear(years[0]);
endYear = Math.max(year, determineYear(years[1] || ""));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
inst.yearshtml += "<span class = 'dummy'>Foo</span> <select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>"
for (; year <= endYear; year++) {
inst.yearshtml += "<option value='" + year + "'" +
(year === drawYear ? " selected='selected'" : "") +
">" + year + "</option>";
}
inst.yearshtml += "</select>";
html += inst.yearshtml;
inst.yearshtml = null;
}
}
还有你的 fiddle :http://jsfiddle.net/gGV3v/2/
更新:
没有按钮,使用更好的方法,现在您可以控制所有生成的 HTML:
var oldGenerateHTML = $.datepicker._generateHTML;
function newGenerateHTML(inst) {
var html = oldGenerateHTML.call(this, inst);
var $html = $(html);
$html.find('[data-handler=prev]').remove();
$html.find('[data-handler=next]').remove();
$html.find('[data-handler=selectMonth]').replaceWith('<span class="dummy">Foo</span>');
return $html;
}
$.datepicker._generateHTML = newGenerateHTML;
Fiddle 也更新了:http://jsfiddle.net/gGV3v/4/
关于javascript - UI 日期选择器 : choosing date overwrites existing settings,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24232076/