Тип ввода HTML5 Дата – значение по умолчанию для сегодняшнего дня?
Новые типы ввода HTML5 великолепны. Новый встроенный сборщик данных Opera – это легкий ветерок, и Chrome, по крайней мере, поддерживает новый тип ввода с реализацией спин-колеса.
Но есть ли способ установить значение по умолчанию для поля даты на сегодняшнюю дату? С Opera я могу выбрать «Сегодня» из списка выбора даты, и как только я нажимаю на любую из кнопок шага в Chrome, он увеличивает / уменьшает текущую дату.
Я не стесняюсь кодировать решение этой незначительной проблемы, но мне кажется глупым, что оба браузера полностью осведомлены о текущей дате, но не будут автоматически просто вставлять ее (по крайней мере, в качестве заполнителя).
- Преобразовать java.util.Date в строку
- Форматирование дат с помощью scale_x_date в ggplot2
- Временная метка Java. Как создать временную метку с датой 23/09/2007?
- Как преобразовать String в Date без знания формата?
- Преобразование переменной со смешанными форматами даты в один формат
- сравнение даты mysql с date_format
- Зацикливание объекта datetime приводит к числовому iteratorу
- Oracle: как добавить минуты в метку времени?
- Конструктор Date (...) устарел. Что это значит? (Ява)
- Выделите даты в определенном диапазоне с помощью датпикера jQuery
- Подмножество кадра данных между двумя датами
- Как получить первый день недели даты в mysql?
- Дата синтаксиса в Bash
Как и любое поле ввода HTML, браузер оставляет его пустым, если значение по умолчанию не задано атрибутом value
.
К сожалению, HTML5 не предоставляет способ указания «сегодня» в атрибуте value
(который я вижу), только действительная дата RFC3339, например, 2011-09-29
. Извините, это не помогает!
Объект JavaScript Date обеспечивает достаточную встроенную поддержку требуемого формата, чтобы избежать его вручную:
Добавьте это для правильной поддержки часового пояса:
Date.prototype.toDateInputValue = (function() { var local = new Date(this); local.setMinutes(this.getMinutes() - this.getTimezoneOffset()); return local.toJSON().slice(0,10); });
JQuery:
$(document).ready( function() { $('#datePicker').val(new Date().toDateInputValue()); });
Pure JS:
document.getElementById('datePicker').value = new Date().toDateInputValue();
это работает для меня:
document.getElementById('datePicker').valueAsDate = new Date();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Следующий код работает хорошо:
Обратите внимание, что это зависит от PHP.
Вы можете заполнить значение по умолчанию через javascript, как показано здесь: http://jsfiddle.net/7LXPq/
$(document).ready( function() { var now = new Date(); var month = (now.getMonth() + 1); var day = now.getDate(); if (month < 10) month = "0" + month; if (day < 10) day = "0" + day; var today = now.getFullYear() + '-' + month + '-' + day; $('#datePicker').val(today); });
Вероятно, я бы добавил немного дополнительного времени, чтобы узнать, являются ли месяц и дата одиночными цифрами и префикс их лишним нолем ... но это должно дать вам представление.
EDIT: добавлена проверка дополнительного нуля
Следуйте стандартным форматам Ymd, если вы используете PHP
">
HTML
JS
$(document).ready(function() { var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); if (month < 10) month = "0" + month; if (day < 10) day = "0" + day; var today = year + "-" + month + "-" + day; $("#theDate").attr("value", today); });
демонстрация
Если вы не хотите использовать jQuery, вы можете сделать что-то вроде этого
HTML
JS
var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); if (month < 10) month = "0" + month; if (day < 10) day = "0" + day; var today = year + "-" + month + "-" + day; document.getElementById("theDate").value = today;
демонстрация
В HTML5 как таковой не существует способа установить значение по умолчанию для поля даты на сегодняшний день? Как показано в других ответах, значение может быть установлено с помощью JavaScript, и это обычно лучший подход, если вы хотите установить значение по умолчанию в соответствии с текущей датой для пользователя при загрузке страницы.
HTML5 определяет свойство valueAsDate
для элементов input type=date
и использует его, вы можете установить начальное значение непосредственно из созданного объекта, например, с помощью new Date()
. Однако, например, IE 10 не знает этого свойства. (Он также не имеет подлинной поддержки input type=date
, но это другая проблема.)
Поэтому на практике вам нужно установить свойство value
, и оно должно соответствовать ISO 8601. В настоящее время это можно сделать довольно легко, поскольку мы можем ожидать, что текущие браузеры будут поддерживать метод toISOString
:
Если вы делаете что-то, связанное с датой и временем в браузере, вы хотите использовать Moment.js :
moment().format('YYYY-MM-DD');
moment()
возвращает объект, представляющий текущую дату и время. Затем вы вызываете его .format()
для получения строкового представления в соответствии с указанным форматом. В этом случае, YYYY-MM-DD
.
Полный пример:
Очень просто, просто используйте серверные языки, такие как PHP, ASP, JAVA или даже вы можете использовать javascript.
Вот решение
используйте moment.js, чтобы решить эту проблему в 2 строках, тип ввода даты html5 принимает только этот формат «ГГГГ-ММ-ДД». Я решаю свою проблему таким образом.
var today = moment().format('YYYY-MM-DD'); $('#datePicker').val(today);
это самый простой способ решить эту проблему.
если вам нужно заполнить ввод datetime, вы можете использовать это:
Это то, что я сделал в своем коде, я только что протестировал и работал нормально, input type = «date» не поддерживает автоматическое определение curdate, поэтому способ, которым я использовал это ограничение, заключался в том, что PHP-код был простым кодом, подобным этому ,
Надеюсь, поможет!
по Javascript:
var today = new Date(); document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
Для NodeJS (Express с шаблонами SWIG):
Поскольку метод установки по умолчанию для сегодняшней даты не существует, я бы сказал, что это должно зависеть от его приложения. Если вы хотите максимизировать доступ аудитории к сборщику даты, используйте сценарий на стороне сервера (PHP, ASP и т. Д.), Чтобы установить значение по умолчанию.
Однако, если это для консоли администрирования CMS, и вы знаете, что пользователь всегда будет доверять JS или вашему сайту, тогда вы можете безопасно использовать JS для заполнения значения по умолчанию, как в jlbruno.
У меня была та же проблема, и я исправил ее с помощью простого JS. Вход:
JS
Важно: сценарий JS должен находиться в последней строке кода или после ввода, потому что если вы поместите этот код раньше, сценарий не найдет ваш вход.
Внутри HTML не существует метода по умолчанию, чтобы вставлять текущую дату в поле ввода. Однако, как и любое другое поле ввода, оно принимает значение.
Вы можете использовать PHP для извлечения текущей даты и ввода ее в поле значения элемента формы.
"; ?>
Поле значения принимает формат YYYY-MM-DD как вход так просто, создав переменную $date_string
в том же формате, в котором принимается входное значение, и заполняет его годом, месяцем и днем, полученным с сегодняшней даты и voilá! У вас есть выбранная дата!
Надеюсь это поможет 🙂
Редактировать:
Если вы хотите, чтобы поле ввода было вложено внутри HTML, а не PHP, вы могли бы сделать следующее.
...
Я понимаю, что этот вопрос был задан некоторое время назад (2 года назад), но мне все же потребовалось некоторое время, чтобы найти определенный ответ в Интернете, так что это будет служить любому, кто ищет ответ, когда это возможно, и надеемся, что это помогает всем очень 🙂
Другое Редактировать:
Почти забыл, что в прошлом для меня была королевская боль, всегда забывайте установить часовой пояс по умолчанию, когда вы создаете скрипт на PHP, который использует функцию date ().
Синтаксис: date_default_timezone_set(...);
, Документацию можно найти здесь, на PHP.net, и список поддерживаемых часовых поясов для вставки в эту функцию можно найти здесь . Это всегда было неприятно, так как я нахожусь в Австралии, все всегда откладывается на 10 часов, если я не установил это правильно, поскольку он по умолчанию имеет UTC + 0000, где мне нужен UTC + 1000, поэтому просто будьте осторожны 🙂
Спасибо, Питер, теперь я меняю свой код.
Вот простой способ сделать это с помощью javascript.
var date = new Date(); var datestring = ('0000' + date.getFullYear()).slice(-4) + '-' + ('00' + (date.getMonth() + 1)).slice(-2) + '-' + ('00' + date.getDate()).slice(-2) + 'T'+ ('00' + date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z'; document.getElementById('MyDateTimeInputElement').value = datestring;
Если вы используете ruby, вы можете использовать это, чтобы установить значение по умолчанию для сегодняшней даты и времени:
Простое решение!
$(document).ready( function() { var now = new Date(); var day = ("0" + now.getDate()).slice(-2); var month = ("0" + (now.getMonth() + 1)).slice(-2); var today = now.getFullYear()+"-"+(month)+"-"+(day) ; $('#datePicker').val(today); });
А для тех, кто использует ASP VBScript
<% 'Generates date in yyyy-mm-dd format Function GetFormattedDate(setDate) strDate = CDate(setDate) strDay = DatePart("d", strDate) strMonth = DatePart("m", strDate) strYear = DatePart("yyyy", strDate) If strDay < 10 Then strDay = "0" & strDay End If If strMonth < 10 Then strMonth = "0" & strMonth End If GetFormattedDate = strYear & "-" & strMonth & "-" & strDay End Function %>
И тогда в теле ваш элемент должен выглядеть примерно так
Ура!