jQuery日期选择器，自定义填充选定日期答案

【问题标题】：jQuery date picker, custom populate selected datejQuery日期选择器，自定义填充选定日期
【发布时间】：2018-10-25 16:54:33
【问题描述】：

我制作了一个包含 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/

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html datepicker customization

【解决方案1】：

试试这个...改变 $("#numNights") onchange function()

 $("#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);
  });

【讨论】：

谢谢，这解决了输入#LastDate 的问题。但第一个问题是 input#LastDate 的值没有在单独的元素中显示结果

【解决方案2】：

我用一个“按钮”来对日期选择器进行“隐藏调用”并运行“onClose”行为来显示分离的元素。

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

    });

如果您需要查看分辨率，请转到我的小提琴的最新版本

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

感谢@Sooriya 的帮助和贡献！

【讨论】：