Когда пользователям необходимо ввести дату, разработчики устанавливают предопределенное/значение по умолчанию даты типа ввода на текущую/сегодняшнюю дату. Теперь пользователю не нужно вводить дату вручную, что в этом смысле экономит время и усилия пользователя. Кроме того, это повышает удобство работы пользователей, точность данных и обеспечивает большее удобство для пользователей. Он имеет различные приложения, такие как система управления событиями, система бронирования и т. д.
В этом блоге показано, как установить значение по умолчанию для даты типа ввода сегодня:
- Использование свойства «valueAsDate»
- Использование метода «toISOString()»
- Использование методов «getFullYear()» и «padStart()»
Способ 1: использование свойства «valueAsDate»
“ значение как дата » используется для получения текущей даты через « Дата() функция. Эта функция используется для выполнения различных операций с датой, таких как получение текущей даты, установка конкретной даты, манипулирование датами и т. д.
Посетите приведенный ниже код для лучшего понимания:
< тело >
< див >
< этикетка для '=' 'сегоднядата' > Дата этикетка >< вход тип '=' 'дата'
идентификатор '=' 'сегоднядата' >
див >
< сценарий >
документ.getElementById ( 'сегоднядата' ) .valueAsDate = новая дата ( ) ;
сценарий >
тело >
В приведенном выше фрагменте кода:
- Во-первых, « <ввод> » тег создается с « тип ' и ' идентификатор » атрибуты установлены на « данные ' и ' сегодняДата ' соответственно. Этот тег « » будет использоваться во всем блоге.
- Далее внутри « <скрипт> » пометить HTML-элемент с идентификатором « сегодняДата ” выбирается с помощью “ получитьэлемент по идентификатору() метод.
- После этого « значение как дата ” свойство назначается и сохраняется как экземпляр нового “ Дата() 'Конструктор.
После выполнения приведенного выше фрагмента кода веб-страница выглядит так:
Вывод показывает, что данные типа ввода имеют значение по умолчанию, установленное на текущую/сегодняшнюю дату.
Способ 2: Использование метода «toISOString()»
Для установки сегодняшнего значения по умолчанию для « вход » на сегодня/текущую дату. “ toISOString() », также можно использовать метод, для лучшего объяснения посетите приведенный ниже фрагмент кода:
< сценарий >const сегодня = новая дата ( ) .toISOString ( ) .substr ( 0 , 10 ) ;
документ.getElementById ( 'сегоднядата' ) .значение = сегодня;
сценарий >
В приведенном выше фрагменте кода:
- Во-первых, новый экземпляр « Дата() » конструктор создан. После этого преобразуйте экземпляр даты в « ИСО ” стандарт с использованием “ toISOString() метод.
- Далее используйте « substr() ' метод, принимающий порядковые номера ' 0 ' и ' 10 ” в качестве параметра. После этого он отображает результат, начиная с « 0 ” индекс к “ 10 ' индекс.
После выполнения вышеуказанного метода веб-страница выглядит так:
Вывод показывает, что данные типа ввода имеют значение по умолчанию, установленное на текущую/сегодняшнюю дату.
Способ 3: Использование методов «getFullYear()» и «padStart()»
В этом разделе « получитьПолныйГод() ” извлекает текущую дату. “ путьНачало() », который помогает в форматировании « дата », который будет отображаться на целевом « вход элемент:
< сценарий >константа текущий = новая дата ( ) ;
const текущий год = текущий.getFullYear ( ) ;
const текущий месяц = строка ( текущий.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
константа текущего дня = строка ( текущая.getDate ( ) ) .padStart ( 2 , '0' ) ;
константная форматированная дата = ` ${текущий год} - ${текущий месяц} - ${текущий день} ` ;
константа myDateInput = document.getElementById ( 'мое свидание' ) ;
myDateInput.value = formattedDate;
сценарий >
Описание приведенных выше фрагментов кода описано в пунктах:
- Во-первых, создайте константный тип переменной, которая хранит объект « Дата() ' конструктор с именем ' текущий ».
- Далее используйте « получитьПолныйГод() ” метод с “ текущий ' и сохраните ее в новой переменной с именем ' текущий год ».
- Затем пройдите « получитьМесяц() ” и добавьте одно число, чтобы начать месяц от 1 до 12 внутри “ Нить() 'Конструктор. Также укажите дополнение из двух символов, используя « путьНачало(2, 0) ». И поместите его во вновь созданную переменную с именем « текущий месяц ».
- Затем выполните тот же процесс, чтобы получить текущую дату, используя « получитьдату() ” и сохраните его в “ сегодня ' переменная.
После выполнения фрагментов кода веб-страница в каждом случае выглядит так:
Вывод показывает, что данные типа ввода имеют значение по умолчанию, установленное на текущую/сегодняшнюю дату.
Заключение
Чтобы установить значение по умолчанию даты типа ввода на сегодняшнюю/текущую дату, значение как дата имущество, « toISOString() ' и ' получитьПолныйГод() можно использовать методы. В случае свойства «valueAsDate» только « Дата() », в то время как в случае « toISOString() ” методы “ substr() ” используется для получения только определенной части даты. В этом блоге показано, как установить значение по умолчанию для даты типа ввода сегодня/текущее.