Выбор даты jQuery, пользовательское заполнение выбранной даты

Question

Я сделал скрипт, который имеет 3 входа:

-Дата начала

-Ввод типа номера (для добавления дней)

-Результат даты (сумма началадата и добавленные дни)

Мне нужно показывать день, месяц и год отдельно от даты начала, но я не получаю их при обновлении ввода даты результата.

$(function() {

$("#numNights").on('change', function() {

    $('#LastDate,#BeginDate').val('');
    $('.dateDetails span').html('');

    daysAdded = this.daysAdded.val();

});

$("#BeginDate").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+1Y',
    onSelect: function(value, date) {
        var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];

        //Populate the selected date on other elements this works fine
        $('#arrDate span.month').html(months[date.selectedMonth]);
        $('#arrDate span.day').html(date.selectedDay);
        $('#arrDate span.year').html(date.selectedYear);

    },
    onClose: function(selected) {
        var daysAdded = parseInt($('#numNights').val());

        var dateDefaults = new Date(selected);
        dateDefaults.setDate(dateDefaults.getDate() + daysAdded);
        var dd = dateDefaults.getDate();
        var mm = dateDefaults.getMonth() + 1;
        var y = dateDefaults.getFullYear();
        var dtFormatted = mm + '/' + dd + '/' + y;


        //LastDate input fills with the result of beginDate+added days
        $('#LastDate').val(dtFormatted);



        //Set date to LastDate input datepicker with out open or display behavior
        //Try to Populate the result date in other elements (like BeginDate) but doesn't works
        $(function() {
            $('#LastDate').datepicker({
                disabled: true,
                setDate: dtFormatted,
                onSelect: function(value, date) {
                    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                    ];
                    $('#depDate span.month').html(months[date.selectedMonth]);
                    $('#depDate span.day').html(date.selectedDay);
                    $('#depDate span.year').html(date.selectedYear);


                }

            });


        });



     }



   });


});

Я делюсь своим кодом в ссылке jsfiddle: https://jsfiddle.net/alonsoct/8f63dyco/

Спасибо за вашу помощь!

Answer 1

Я получил его с помощью «кнопки», чтобы сделать «скрытый вызов» средства выбора даты и запустить поведение «onClose», чтобы показать отдельные элементы.

     $('#depDate label').click(function() {
      $("#LastDate").datepicker("show");
      $("#LastDate").datepicker("hide");
      $('#ui-datepicker-div').css('visibility', 'hidden');

    });

Если вам нужно увидетьразрешение перейти к последней версии моей скрипки

https://jsfiddle.net/alonsoct/8f63dyco/

Спасибо @Sooriya за вашу помощь и вклад!

Answer 2

Попробуйте это ... измененная функция замены $ ("# numNights") ()

 $("#numNights").on('change', function() {

    $('#LastDate').val('');

    var beginDate= new Date($('#BeginDate').val());
    daysAdded = parseInt($('#numNights').val());
    beginDate.setDate(beginDate.getDate() + daysAdded);
    var dd = beginDate.getDate();
    var mm = beginDate.getMonth() + 1;
    var y = beginDate.getFullYear();
    var dtFormatted = mm + '/' + dd + '/' + y;

      $('#LastDate').val(dtFormatted);
  });