jQuery UI Datepicker отдельная дата/месяц + год

Question

Я хочу, чтобы датировщик, как один на booking.com.

Он автоматически изменяет день + дату месяца, когда изменяется месяц или год в другом поле выбора. Я посмотрел на API jQuery datepicker, но я не мог найти ничего, что могло бы помочь мне.

Answer 1

See I Created One Fiddle Где вы выбираете Date From DatePicker, тогда он изменится на день/месяц/год на другое поле. : Demo

$(function() { 
$("#fullDate").datepicker({ 
    onClose: function(dateText, inst) { 
     $('#year').val(dateText.split('/')[2]); 
     $('#month').val(dateText.split('/')[0]); 
     $('#day').val(dateText.split('/')[1]); 
    } 
}); 
}); 

Answer 2

Спасибо за ваш ввод. Я наконец понял, как заставить его работать.

Так вот ответ для всех, кто хочет такого рода функциональности.

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')); 

}); 

Demo & Code