JQuery UI DatePicker диапазон очистить значение на основе другого выбранного значения - PullRequest
Новая
       23

JQuery UI DatePicker диапазон очистить значение на основе другого выбранного значения

0 голосов
/ 14 февраля 2019

Я использую диапазон дат JQuery UI, который использовался в следующей статье ( диапазон дат jquery ui 15 дней между двумя датами ) для моей формы, он работает отлично, проблема в том, что у меня есть еще один раскрывающийся списокВ столбце списка я хочу очистить 1 столбец с датой при выборе значения в раскрывающемся списке.Ниже приведен код, который я использую из статьи: 

$(function () {
    $("#txtFrom").datepicker({      
       onSelect: function(selectedDate) {
            //$("#cal4").datepicker("setDate", selectedDate);
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#txtTo").datepicker("setDate", date);
            $("#txtTo").datepicker("option", "minDate", selectedDate);
            $("#txtTo").datepicker("option", "maxDate", date);
        }
    });
    
    
  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  })  
    
});
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<input type="text" id="txtFrom" />

<input type="text" id="txtTo" />

Ответы [ 3 ]

0 голосов
/ 14 февраля 2019

Вот пример, который может помочь.Я сделал пример трехстороннего выбора из элемента <select>.Выбор определяет, какие датеры доступны. 

$(function() {
  $("#txtFrom").datepicker({
    onSelect: function(selectedDate) {
      $("#txtTo").datepicker("option", {
        defaultDate: selectedDate,
        minDate: selectedDate,
        maxDate: "+15d"
      });
    }
  });

  $("#txtTo").datepicker({
    changeMonth: true,
    changeYear: true
  });

  $("#slctDate").change(function() {
    switch ($("option:selected", this).val()) {
      case "None":
        $("#txtFrom, #txtTo").val("").prop("disabled", true);
        break;
      case "Single":
        $("#txtFrom, #txtTo").prop("disabled", false);
        $("#txtTo").val("").prop("disabled", true);
        break;
      case "Range":
        $("#txtFrom, #txtTo").prop("disabled", false);
        break;
    }
  });

});
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Pick Choice:
<select id="slctDate">
  <option></option>
  <option>None</option>
  <option>Single</option>
  <option>Range</option>
</select>
<br />
<input type="text" id="txtFrom" disabled="true" />
<input type="text" id="txtTo" disabled="true" />

MaxDate

String : строка в формате, определяемомопция dateFormat или относительная дата.Относительные даты должны содержать пары значений и периодов;допустимые периоды: "y" для лет, "m" для месяцев, "w" для недель и "d" для дней.Например, "+1m +7d" соответствует одному месяцу и семи дням с сегодняшнего дня.

From: http://api.jqueryui.com/datepicker/ - заполнен справкой.

Немного проще установитьМаксимальная дата таким образом, немного меньше кода.

Надеюсь, это поможет.

0 голосов
/ 15 февраля 2019

Я нашел решение, добавив On Change в функцию txtForm.

0 голосов
/ 14 февраля 2019

Как то так?триггерное событие при изменении 

  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  }).on( "change", function() {
   //add your code ref: txtFrom
  }),
...