1

как сделать в input type=date так, что бы допустим щас 2018 год и в этом инпуте можно было выбрать дату только до 2018 года, если 2019 до 2019 , думаю смысл понятен. Реально ли это сделать с помощью php или js?

1 ответ 1

3

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

До 2018 года:<br/>
<input type="date" max="2017-12-31">
<br/>
До конца 2018 года:<br/>
<input type="date" max="2018-12-31">

var editDate = document.getElementById("test");
editDate.setAttribute("max", (new Date()).getFullYear() + "-12-31");
Aвтоматически<br/>
<input type="date" id="test">

function updateMinMax() {
  var editDate = document.getElementById("test");
  editDate.value = "";
  editDate.min = "";
  editDate.max = "";

  var schoolYear = document.getElementById("schoolYear");
  var yearText = schoolYear.options[schoolYear.selectedIndex].textContent;
  var parts = yearText.split("/");
  if (parts.length == 2) {
    editDate.min = parts[0] + "-09-01";
    editDate.max = parts[1] + "-05-31";
  }
  console.log("updateMinMax", editDate.min, editDate.max);
}
updateMinMax();

function checkDate(el) {
  console.log("checkDate", el.min, el.max, el.value);
  if (el.value < el.min || el.value > el.max) {
    el.value = "";
    console.error("out of range");
  }
}
По учебному году:<br/>
<select id="schoolYear" onchange="updateMinMax()">
  <option value="0">Select a year</option>
  <option value="1">2016/2017</option>
  <option value="2">2017/2018</option>
  <option value="3">2018/2019</option>
</select>
<input type="date" id="test" onblur="checkDate(this)">

7
  • Спасибо. Вы так быстро отвечаете, я не успел вопрос исправить, вот допустим у меня есть БД , а в БД есть таблица "учебный год" со значениями 2017/2018, 2018/2019. как сделать, что бы если мы с помощью селекта выбрали 2017/2018, то в инпуте с типом дата, оно поставило Min и max соответствующие без перезагрузки страницы.Я как понимаю это использвание ajax
    – Одиум
    26 сен 2018 в 20:22
  • выдает ошибку schoolYear is null, can't access property "value" of it
    – Одиум
    26 сен 2018 в 22:36
  • @Одиум Возможно, скрипт находится в странице выше элемента, который ищется по id. Перенесите скрипт в конец страницы или оберните в обработчик window.onload.
    – user176262
    26 сен 2018 в 23:24
  • Заработало , я думал, просто нету значений, потому что value у optin никакие не прописаны. Можно ласт вопрос?У меня получается, что если из БД года брать, то у них же <option value=1>2016/2017</option>,<option value=2>2017/2018</option>, где value это его айди в БД, как сделать, что бы брало option не по value,а по содержимому otpion. И как сделать, что бы выводило ошибку, если мы вручную ввели 2019, когда у нас максимально 2018 год . Спасибо за помощь.
    – Одиум
    27 сен 2018 в 1:23
  • Круто, заработало,Спасибо. Но опять же, вручную я спокойно могу ввести данные ,которые не соответствуют заданным Min и max, точнее не с помощью мышкии выбору по календарю, а с помощью ввода цифр
    – Одиум
    28 сен 2018 в 2:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.