DateUpicker пользовательского интерфейса jQuery - количество дней между датами

Question

Я использую jQuery UI Datepicker.У меня есть два поля даты.Я хотел бы найти разницу в количестве дней между двумя датами.

Как только у меня будет количество дней, я бы хотел поместить указанное количество dasy в текстовое поле.

Любоепомощь в этом вопросе будет высоко ценится.

Ура.

Answer 1

Вы можете использовать событие onselect для получения дат.

$('#date1').datepicker({
   onSelect: function(dateText, inst) { 
       var d1=new Date(dateText);
       // get date from other text field
       var d2=new Date($('#date2').val());
       // d2 -d1 gives result in milliseconds
       // calculate number of days by Math.abs((d2-d1)/86400000, as 24*3600*1000 = 86400000
       // and populate it to some text field #textfield
       $('#textfield').val((Math.abs((d2-d1)/86400000)));
   }
}); 

Answer 2

Вам необходимо понять основную формулу для получения дней между датами, отметьте здесь

Поиск в Google "количество дней между двумя датами javascript" дает this отличный фрагмент (на самом деле все лучшие результаты имеют отношение к вашему вопрос):

var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2008,01,12);
var secondDate = new Date(2008,01,22);

var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));

> (Это взято из ответа stackoverflow, для подробного просмотра, пожалуйста, отметьте здесь )

Используйте код ниже для получения числа дат между днями

function showDays() {
    var start = $('#arr_date').datepicker('getDate');
    var end = $('#dep_date').datepicker('getDate');
    if (!start || !end) return;
    var days = (end - start) / 1000 / 60 / 60 / 24;
    $('#num_nights').val(dayss);
}

$("#arr_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,
     onClose: function( selectedDate ) {
         var dParts = selectedDate.split('-');
         var in30Days = new Date(dParts[2] + '/' +
                        dParts[1] + '/' +
                        (+dParts[0] + 30)
               );

    $( "#dep_date" ).datepicker( "option", "minDate", in30Days );
    }
});
$("#dep_date").datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: showDays,

});

Вот МИФИДЛ

Answer 3

Я решил это с помощью DatePaner DateRange вместо того, чтобы использовать 2 разных DatePicker, затем я вычисляю количество дней в диапазоне и отвечаю в текстовое поле, как вам нужно.Надеюсь, это поможет.

HTML

<form>
    <label>From</label>
    <input id="from" readonly="readonly" name="from" type="text" value="">
    <label>To</label>
    <input id="to" readonly="readonly" name="to" type="text" value="">
    <label>Days</label>
    <input id="days" readonly="readonly" name="days" type="text" value="">
</form>

jQuery UI

<script>
var from = new Date();
var to = new Date();
var dayDiff = 1;

$(function() {
var dates = $( "#from, #to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );

            if (this.id == "from"){
                from = $(this).datepicker('getDate');
                if (!(to == "")){
                    update_days()
                }
            }
            if (this.id == "to"){
                to = $(this).datepicker('getDate');
                update_days()
            }
        }
    });
});

function update_days(){
    dayDiff = Math.ceil((to - from) / (1000 * 60 * 60 * 24));
    $("#days").empty()
    $("#days").append(dayDiff)
}
</script>