2013-09-25 3 views
-1

при выборе ничего для даты начала, дата окончания должна автоматически стать такой же, как даты начала на один клик в JQueryАвтоматически устанавливается дата окончания на DatePicker

var dates = $("#filterDateStart, #filterDateEnd").datepicker({ 
    dateFormat: "yy-mm-dd", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function (selectedDate) { 
     var option = this.id == "filterDateStart" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 
    } 
}); 


var dates1 = $("#filterDateStart1, #filterDateEnd1").datepicker({ 
    dateFormat: "yy-mm-dd", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function (selectedDate) { 
     var option = this.id == "filterDateStart1" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
     dates1.not(this).datepicker("option", option, date); 
    } 
}); 
+0

Итак, что происходит вместо того, что вы ожидаете? –

+0

Довольно бедный объем усилий здесь. –

+0

Возможный дубликат [Как я могу установить дату начала как дату окончания по умолчанию, если пользователь не вводит дату окончания в jquery?] (Http://stackoverflow.com/questions/18821299/how-can-i-set- заместитель запуска дата-а-умолчанию конец-дата-если-заместитель пользователя никак-не-входа-) –

ответ

0

Попробуйте следующий код, он будет показать как дата и время

var startDateTextBox = $('#startdate'); 
    var endDateTextBox = $('#enddate'); 

    startDateTextBox.datetimepicker({ 
     minDate: '0', 
     dateFormat: "yy-mm-dd", 
     timeFormat: 'hh:mm:ss', 
     onClose: function(dateText, inst) { 
      if (endDateTextBox.val() != '') { 
       var testStartDate = startDateTextBox.datetimepicker('getDate'); 
       var testEndDate = endDateTextBox.datetimepicker('getDate'); 
       if (testStartDate > testEndDate) 
        endDateTextBox.datetimepicker('setDate', testStartDate); 
      } 
      else { 
       endDateTextBox.val(dateText); 
      } 
     }, 
     onSelect: function (selectedDateTime){ 
      endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate')); 
     } 
    }); 
    endDateTextBox.datetimepicker({ 
     minDate: '0', 
     dateFormat: "yy-mm-dd", 
     timeFormat: 'hh:mm:ss', 
     onClose: function(dateText, inst) { 
      if (startDateTextBox.val() != '') { 
       var testStartDate = startDateTextBox.datetimepicker('getDate'); 
       var testEndDate = endDateTextBox.datetimepicker('getDate'); 
       if (testStartDate > testEndDate) 
        startDateTextBox.datetimepicker('setDate', testEndDate); 
      } 
      else { 
       startDateTextBox.val(dateText); 
      } 
     }, 
     onSelect: function (selectedDateTime){ 
      startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate')); 
     } 
    }); 
0

чуть более упрощенный подход .. Я предпочитаю использовать .destroy() & пересоздать .datepicker() на каждое изменение. Хотя, очевидно, зависит от выбора пользователя .start-datepicker() первого (который я бы ободрить!)

<script> 
    /** 
    * Start the 'Start Date' & End Date picker, 
    **/ 
    $('.start-datepicker').datepicker({dateFormat: 'yy-mm-dd'}); 
    $('.end-datepicker').datepicker({dateFormat: 'yy-mm-dd'}); 

    /** 
    * On the 'On change' event listener, 
    * dynamically re-create the 'end' date based 
    * on the Start date. 
    **/ 
    $('.start-datepicker').on("change", function() { 

     //Begin the re-creation 
     $('.end-datepicker').datepicker("destroy"); 

     $('.end-datepicker').datepicker({ 
       /** 
       * Set the date to be the same as the first 
       **/ 
       minDate : $('.start-datepicker').datepicker("getDate"), 
       dateFormat: 'yy-mm-dd', 
       //Optional: setDate: The same as minDate. 
      }); 
     }); 
</script> 
2
$("#filterDateStart, #filterDateEnd").datepicker({ 
    dateFormat: "yy-mm-dd", 
    changeMonth: true, 
    numberOfMonths: 1, 
    onSelect: function (selectedDate) { 
     $("#filterDateEnd").datepicker("setDate", selectedDate); 
    } 
}); 

Надеется, что это работает

Смежные вопросы