установить дату в типе ввода date

107
<input id="datePicker" type="date" />​

Я установлю сегодняшнюю дату в дате типа ввода datepicker в chrome.

$(document).ready( function() {
    var now = new Date();
    var today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    alert(today);
    $('#datePicker').val(today);
});​

но это не работает

Отредактируйте этот jsFiddle - попробуйте в Chrome.

Отправитель
источник
2
Если вы выбираете дату на скрипке и проверить результат кадр, делая $('#datePicker').val();дает , "2012-09-10"и это не формат используется для установки даты
У меня он работает в хроме .. Что вы конкретно имеете в виду its not working?
AdityaParab
попробуйте:, { currentText: "Now" }см. руководство
diEcho
работает на меня ... в чем проблема?
Netorica
1
@JigarPandya fr_FR (@ user108, ​​см. Также stackoverflow.com/a/3496622/180100 )

Ответы:

160

Ссылка на скрипт: http://jsfiddle.net/7LXPq/93/

В этом две проблемы:

  1. Элемент управления датой в HTML 5 принимает формат год - месяц - день, как мы используем в SQL.
  2. Если месяц равен 9, его нужно установить как 09, а не просто 9. То же самое относится и к дневному полю.

Пожалуйста, перейдите по ссылке на скрипку для демонстрации:

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);
Дханасекар
источник
4
Ответ после 2012 года: проверьте мой ответ на предмет поддерживаемого решения в одной строке кода.
Oliv Utilo
@ OlivUtilo - конечно, но иногда ваш ответ будет давать неверные результаты.
RobG
Ты сэкономил мне время, чувак, большое спасибо
Дип Сурани
129

document.getElementById("datePicker").valueAsDate = new Date()

должно сработать.

int32_t
источник
6
Это лучшее решение, которое я нашел до сих пор - работает на Android 4.0.3
Бен Клейтон,
6
Определенно кажется чище, чем принятый ответ ... спасибо
Skipjack
1
Я обнаружил, что по какой-то причине это не работает в Safari :(
james_alvarez
Протестировано в Chrome и Edge и работает нормально. Как сказал @Skipjack, отличный ответ!
Арун,
Похоже на правильное решение, однако в Safari (13.1.2) вызов выдает исключение недопустимого состояния. Не уверен, почему ...?
fbitterlich
23

Обновление: я делаю это с помощью date.toISOString().substr(0, 10). Дает тот же результат, что и принятый ответ, и имеет хорошую поддержку.

Олив Утило
источник
2
Работает в сафари
james_alvarez
4
Примечание: это дает дату в часовом поясе UTC. Напротив, в верхнем ответе используется местное время.
Qwertie
@Qwertie - они оба работают с одним и тем же Dateобъектом (созданным с помощью new Date или Date.now, которые наследуют часовой пояс от браузера). использование toISOString или функций getDate (я думаю) разрешит то же самое; так что я думаю, что это должно иметь желаемое поведение ...
Олив Утило
1
@ OlivUtilo - Нет, они не относятся к периоду смещения часового пояса для хоста.
RobG
Как говорит Qwertie, это потенциально может дать неправильный ответ, если вы используете дату без времени. например, суббота, 1 сентября 2018 г., 00:00:00 GMT + 0100 преобразуется в «
31
14
var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

Приведенный выше код будет работать.

Гурав Махиджа
источник
12

Для меня самый короткий способ решить эту проблему - использовать moment.js и решить эту проблему всего за 2 строки.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);
Умайр Халид
источник
1
да точно так же, как $ ('# datePicker'). val (moment (). format ('ГГГГ-ММ-ДД'));
Умайр Халид
2
Для людей, незнакомых с Moment, если вы хотите отформатировать произвольный объект Javascript Date с помощью moment (): var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);
veuncent
1

Обычно я создаю эти две вспомогательные функции при использовании ввода даты:

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

Затем вы можете установить значение ввода даты как:

$('#datePicker').val(dateToInput(new Date()));

И получить выбранное значение вот так

const dateVal = inputToDate($('#datePicker').val())
aashah7
источник
1

Вы можете использовать дату во вводе только type="date"как в форматеYYYY-MM-DD

Я реализовал помощник, как formatDateв экспресс-манипуляторах NODE.js, не беспокойтесь ... просто используйте формат, как описано в первой строке.

например:

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />
Мухаммад Шахзад
источник
0

Datetimepicker всегда нуждается в формате ввода ГГГГ-ММ-ДД, его не волнует формат отображения вашей модели или дата и время вашей локальной системы. Но формат вывода средства выбора даты и времени - это то, что вам нужно (ваша локальная система). В моем посте есть простой пример .

Эда Джеде
источник
0

Для меня самый короткий способ получить дату локали и в правильном формате для ввода type="date":

var d = new Date(); 
var today = d.getFullYear()+"-"+("0"+(d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);

Или это :

var d = new Date().toLocaleDateString().split('/');
var today = d[2]+"-"+("0"+d[0]).slice(-2)+"-"+("0"+d[1]).slice(-2);

Затем просто установите значение ввода даты:

$('#datePicker').val(today);
Фенди
источник
-5

Версия jquery

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));
Крутарт Вора
источник
4
$.datepickerне является jQuery по умолчанию. Вы используете плагин и не говорите, какой именно, этот ответ бесполезен.
Эмиль Бержерон