![](/img/trans.png)
[英]jQuery UI datepicker functionality to select only year or year-month or year-month-date
[英]jQuery UI Datepicker separate date/month+year
我想要一個日期選擇器,就像booking.com 上的那個一樣。
當另一個選擇框中的月份+年份更改時,它會自動更改月份的日期+日期。 我查看了 jQuery datepicker 的 API,但找不到任何可以幫助我的東西。
請參閱我創建了一個小提琴,您從 DatePicker 中選擇日期,然后它將在另一個字段的日/月/年中更改。 :演示
$(function() {
$("#fullDate").datepicker({
onClose: function(dateText, inst) {
$('#year').val(dateText.split('/')[2]);
$('#month').val(dateText.split('/')[0]);
$('#day').val(dateText.split('/')[1]);
}
});
});
感謝您的輸入。 我終於想出了如何讓它工作。
所以這里是任何想要這種功能的人的答案。
HTML
<select name="day" id="day">
<option value="">Select Day</option>
</select>
<select name="month" id="month">
<option value="">Select Month</option>
</select>
JS
function getMonths() {
var months = new Array(12);
months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";
var d = new Date();
var month = d.getMonth();
var year = d.getFullYear();
var monthsArray = new Array(13);
for (var i = 0; i < 13; i++) {
var now = new Date();
if (now.getMonth() == 11) {
var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
var current = new Date(now.getFullYear(), now.getMonth() + i, 1);
}
monthsArray[current.getMonth() + 1 + '_' + current.getFullYear()] = months[current.getMonth()] + ' ' + current.getFullYear();
}
return monthsArray;
}
function getDaysInMonth(month, year, daySelector) {
var names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var date = new Date(year, month - 1, 1);
var days = [];
while (date.getMonth() == month - 1) {
days[date.getDate()] = (date.getDate() + " " + names[date.getDay()]);
date.setDate(date.getDate() + 1);
}
daySelector.find('option').remove();
daySelector.append($("<option></option>").attr("value", '').text("Day"));
for (var key in days) {
daySelector.append($("<option></option>").attr("value", key).text(days[key]));
}
}
var months = getMonths();
for (var key in months) {
$('#month')
.append($("<option></option>")
.attr("value", key)
.text(months[key]));
}
$('#month').change(function () {
var monthYear = $('#month').val().split('_');
getDaysInMonth(monthYear[0], monthYear[1], $('#day'));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.