JQuery: как установить дату начала выбора даты в диапазоне - PullRequest
Новая
       31

JQuery: как установить дату начала выбора даты в диапазоне

1 голос
/ 22 июня 2019

Я пытаюсь установить дату начала и окончания диапазона дат в datepicker(), где дата начала диапазона составляет 7 дней в прошлом, а дата окончания - вчера.

В настоящее времяУ меня это работает так, что начальная дата диапазона составляет 7 дней в прошлом, однако я не знаю, как установить конечную дату вчера.

Я пробовал следующее, но это не такработать, как я ожидаю: 

var mindate = new Date();
    mindate.setDate(mindate.getDate() - 7);
    $('#date').datepicker({
        language: 'en',
            range : true,
            minDate : mindate,
            maxDate : new Date() - 1,   //I guess the problem is here
            multipleDates: true,
            multipleDatesSeparator: " - "
    })

Ответы [ 3 ]

2 голосов
/ 22 июня 2019

Один из подходов состоит в том, чтобы вычислить maxdate, используя ту же технику, что вы использовали для вычисления mindate, а затем применить это максимальное значение даты к параметру maxData экземпляра datepicker(): 

var mindate = new Date();
mindate.setDate(mindate.getDate() - 7);

/* Compute max date of "yesterday" using same method as 
min date */
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() - 1);

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : mindate,
    maxDate : maxdate, /* Apply max date to date picker */
    multipleDates: true,
    multipleDatesSeparator: " - "
});

Плагин datepicker() также позволяет указывать minDate и maxDate через количество дней относительно сегодняшней даты .Это означает, что вы можете достичь того же результата, как показано выше, без необходимости вычислять mindate и maxdate, указав minDate и maxDate, как показано: 

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : -7, /* 7 days ago */
    maxDate : -1, /* Yesterday */
    multipleDates: true,
    multipleDatesSeparator: " - "
});
1 голос
/ 22 июня 2019

В HTML5 у вас уже есть <input type="date">, поэтому вам не нужен jQuery.

Если вам не нужна поддержка устаревших браузеров, я могу рекомендовать использовать HTML5 только через jquery.

HTML 

<input type="date" id="date">

Ванильный JS 

function getHtmlDateString(date) {
  var dd = date.getDate();
  var mm = date.getMonth()+1; //January is 0!
  var yyyy = date.getFullYear();
  if(dd<10){
    dd='0'+dd
  } 
  if(mm<10){
    mm='0'+mm
  } 

  return yyyy+'-'+mm+'-'+dd;
}

var min = new Date();
min.setDate(min.getDate()-7);
document.getElementById("date").setAttribute("min", getHtmlDateString(min));
var max = new Date();
max.setDate(max.getDate()-1);
document.getElementById("date").setAttribute("max", getHtmlDateString(max));

JSFiddle: https://jsfiddle.net/hmqe4sb6/

1 голос
/ 22 июня 2019

minDate и maxDate могут указывать количество дней с сегодняшнего дня.

https://api.jqueryui.com/datepicker/#option-minDate

Так что все, что вам нужно сделать, это 

minDate: -1,
maxDate: -7,
...