Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вывод даты и времени (https://javascript.ru/forum/misc/74722-vyvod-daty-i-vremeni.html)

xlebosolniy 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 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 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 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 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 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 03.08.2018 13:36

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

Dilettante_Pro 03.08.2018 14:13

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

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

xlebosolniy 04.08.2018 22:51

спасибо)


Часовой пояс GMT +3, время: 19:03.