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

尝试一下...更改了$（“＃numNights”）onchange函数（）

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

Answer 2

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

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

    });

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

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

感谢@Sooriya的帮助和贡献！

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

2 个答案: