如何使用JQuery UI datepicker从开始日期和日期中获取结束日期

时间:2020-09-30 14:58:28

标签: html jquery

我使用JQuery-UI datepicker在我的应用程序中包含以下代码:

$(function() {
  $('.start_date').datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    minDate: +1,
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
  });
  $('.end_date').datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    showAnim: 'slideDown',
    duration: 'fast',
    minDate: +1,
    yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
    enableOnReadonly: true,
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"/>
<input type="text" id="start_date" placeholder="Start Date" />
<input type="number" id="daysNumber" placeholder="Days" />
<input type="text" id="end_date" placeholder="End Date" readonly/>

我用了这个:

<script type="text/javascript">
     $(document).ready(function () {

         $( ".no_of_days" ).change(function() {
            var periodval=$(".no_of_days").val();
            var startDate = $('.start_date');
            var endDate = $('.end_date');
            //endDate.setDate(endDate.getDate() + periodval);
            var dte = startDate.datepicker("getDate"); 
            dte.setDate(dte.getDate()+periodval); 
            endDate.datepicker("setDate", dte);

          });

            $( '.start_date' ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,      
                showAnim: 'slideDown',
                duration: 'fast',   
                minDate: +1,
        });

            $( '.end_date' ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,      
                showAnim: 'slideDown',
                duration: 'fast',   
                minDate: +1,
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                enableOnReadonly: true,
            });
    });
</script>

但是这个错误:

未捕获的TypeError:endDate.getDate不是函数

这将突出显示:

endDate.setDate(endDate.getDate()+ periodval);

我已经看到了一些示例,但实际上并没有使用JQuery UI。

我怎么

  1. onchange daysNumber从开始日期和天数(daysNumber)中获取结束日期

  2. ,并在选择开始日期时以daysNumber的值获取结束日期

使用JQuery-UI日期选择器

0 个答案:

没有答案