Форум

xlebosolniy · #1 (**permalink**) 02.08.2018, 23:23

Делаю выбор даты и времени, вот так идет выбор даты с временем:

<input type="datetime-local" required>

а вот так вывожу текущую дату и время:

<script>
$(document).ready(function(){
    $('input[type=datetime-local]').val(new Date().toJSON().slice(0,19));
});
</script>

в итоге выглядит формат так: дата-месяц-год час:минута:секунда

Получается, что при таком выводе какую бы я дату или время (час и минута) не поставил, мне выдает ошибку, что ближайшее допустимое значение та дата и время, которое установлено или та дата и время, которое установлено, но только +1 к минуте, но если установить секунды на 0, то форма проходит при любой дате и времени.

если здесь slice(0,19)); 19 изменить на 16, то формат такой: дата-месяц-год час:минута, как мне и нужно, но только тогда какую бы дату и время я не поставил форма проходит.

Возможно ли этим решением сделать чтобы форма проходила при выборе любой даты или времени, но только если она не меньше текущей, проверив например через атрибут max или все гораздо сложнее?)

j0hnik · #2 (**permalink**) 02.08.2018, 23:34

для форматирования лучше использовать

https://developer.mozilla.org/ru/doc...toLocaleString

https://developer.mozilla.org/ru/doc...DateTimeFormat

проверять лучше сравнивая примитивы

<input type="date" id="date"> <button>отправить</button>
	<script>
document.querySelector('button').onclick=e=> alert(new Date(date.value) > Date.now());
	</script>

xlebosolniy · #3 (**permalink**) 03.08.2018, 11:46

Вообще ничего не понял) но за ответ спасибо) смотрите, а вот так нельзя никак сделать?

<input type="datetime-local" name="date" max ="datetime" required>

  <script>
  var d = new Date();
  var elem = document.getElementById("datetime"); 
  elem.value = d.toISOString().slice(0,16);</script>

почему вот этот способ не работает? атрибут "max" как я понимаю не дает поставить дату меньше заявленной, если вместо "max" написать "id", то выставляется текущая дата, а в "max" это не определяется почему-то

Dilettante_Pro · #4 (**permalink**) 03.08.2018, 12:57

Сообщение от xlebosolniy

var elem = document.getElementById("datetime");

- нет у вас такого id. Вообще никакого нет.

Сообщение от xlebosolniy

атрибут "max" как я понимаю не дает поставить дату меньше заявленной

Наоборот - нельзя больше.

Сообщение от xlebosolniy

в "max" это не определяется почему-то

В max или min должно стоять значение в соответствующем формате.

Вот пример с input type="date" (ограничение ввода с type="datetime-local" мне не удалось сделать)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 

   <input type="date" id="date" min ="2018-08-01" max ="2018-08-10" required>
  
<script>
  var d = new Date();
  var elem = document.getElementById("date"); 
  elem.value = d.toISOString().slice(0,10);
</script>
 </body>
</html>

Пример работает в Хроме и Опере

xlebosolniy · #5 (**permalink**) 03.08.2018, 13:03

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
<form>
   <input type="datetime-local" id="date" min ="2018-08-01T00:00" required>
   <input type="submit">
</form>
<script>
  var d = new Date();
  var elem = document.getElementById("date"); 
  elem.value = d.toISOString().slice(0,16);
</script>
 </body>
</html>

вот так работает, нельзя задать дату меньше 01-08-2018, а если текущую дату и время сконвертировать в такой формат: год-месяц-деньTчас:мин и вставить в атрибут "min" будет запрещать отправлять форму если дата меньше текущей?

Dilettante_Pro · #6 (**permalink**) 03.08.2018, 13:20

xlebosolniy,

Сообщение от xlebosolniy

вот так работает

У меня в вашем примере спокойно задается любой другой месяц. Ограничение года работает коряво.
Проверка срабатывает только при отправке

Насчет установки min

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Тег input, атрибут max</title>
 </head>
 <body> 
<form>
   <input type="datetime-local" id="date" min ="2018-08-01"  required>
   <input type="submit">
</form>  
<script>

  var elem = document.getElementById("date");
  var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
  var d = (new Date(Date.now() - tzoffset)).toISOString().slice(0,16);
  elem.value = d;
  elem.setAttribute("min",d);
  d = (new Date(Date.now() + 10*24*60*60*1000)).toISOString().slice(0,16);
  elem.setAttribute("max",d);
</script>
 </body>
</html>

PS: Если указать min и max, то проверка работает нормально - число вне диапазона невозможно ввести

xlebosolniy · #7 (**permalink**) 03.08.2018, 13:36

Да, все верно) Проверка срабатывает при отправке, мне и так нормально будет, не обязательно в ходе установки даты) Спасибо за помощь) и еще такой вопрос, как время там отображается, откуда оно берется? У меня по местному 17, на компе стоит МСК - 13, а на страничке отображается 10 часов)

Dilettante_Pro · #8 (**permalink**) 03.08.2018, 14:13

xlebosolniy,
toISOString() - Временная зона — всегда UTC, на что указывает суффикс Z в выводе.

Изменил пример в Пост#6 - добавил корректировку на местную зону клиента

xlebosolniy · #9 (**permalink**) 04.08.2018, 22:51

спасибо)

Форум

Справочник

Discord чат

Курсы javascript