使用datepicker在javascript中更改开始日期时,结束日期不会更改

时间:2018-08-17 22:15:16

标签: javascript jquery datepicker

我正在尝试使用datepicker在javascript中确定开始日期和结束日期。我有jQuery 2.1.1。我无法更改jQuery版本,因为在应用程序中还有其他方法正在使用此版本。通过手动单击或更改日期,不会更改setStartDate,setEndDate和setDate。任何建议,技巧或帮助将不胜感激。这是我的代码如下:

    <script>
            $(document).ready(function () {
                var currentDate = new Date();
                $('.hasStartDate').datepicker({
                    autoClose: true,
                    changeMonth: true,
                    changeYear: true,
                    minDate: '-1m',
                    maxDate: '+3m',
                    beforeShowDay: $.datepicker.noWeekends
                }).on('changeDate', function(e){
                    $('.hasEndDate').datepicker('option', 'minDate', e.date),
                    $('.hasEndDate').datepicker('option', 'maxDate', e.date + 364),
                    $('.hasEndDate').datepicker('setStartDate', e.date),
                    $('.hasEndDate').datepicker('setEndDate', e.date + 364),
                    $('.hasEndDate').datepicker('setDate', e.date + 364),
                    $('.hasEndDate').datepicker('refresh')
                });
                $('.hasStartDate').datepicker('setDate', currentDate);

                var tdate = $('.hasStarDate').datepicker('getDate');
                var ddate = tdate + 364;
                $('.hasEndDate').datepicker({
                    autoClose: true,
                    changeMonth: true,
                    changeYear: true,
                    minDate: tdate + 1,
                    maxDate: ddate,
                    beforeShowDay: $.datepicker.noWeekends
                }).on('changeDate', function(e){
                    $('.hasStartDate').datepicker('setEndDate', e.date)
                });
                $('.hasEndDate').datepicker('setDate', ddate);
            });
        </script>

1 个答案:

答案 0 :(得分:1)

这应该可以解决问题。选择日期后,将其分为日,月,年,并构造最小和最大日期以及set it using options dynamically

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input class="hasStartDate"/>
<input class="hasEndDate"/>
'\n'