Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Date value Property
The HTML DOM Input Date value property allows you to get or set the value of an <input type="date"> element. The value is returned as a string in YYYY-MM-DD format, which is the ISO 8601 date format standard.
Syntax
Following is the syntax to get the value −
inputDateObject.value
Following is the syntax to set the value −
inputDateObject.value = 'YYYY-MM-DD'
Return Value
The value property returns a string representing the selected date in YYYY-MM-DD format. If no date is selected, it returns an empty string.
Getting the Date Value
Following example demonstrates how to retrieve the current value of a date input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Date Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Select a Date:</h3>
<input type="date" id="myDate" value="2024-12-25">
<button onclick="getValue()">Get Value</button>
<p id="result"></p>
<script>
function getValue() {
var dateInput = document.getElementById("myDate");
var selectedDate = dateInput.value;
document.getElementById("result").innerHTML = "Selected Date: " + selectedDate;
}
</script>
</body>
</html>
The output displays the selected date in YYYY-MM-DD format −
Selected Date: 2024-12-25
Setting the Date Value
Following example shows how to programmatically set the value of a date input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Date Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Date Selector:</h3>
<input type="date" id="dateField">
<br><br>
<button onclick="setToday()">Set to Today</button>
<button onclick="setCustomDate()">Set Custom Date</button>
<button onclick="clearDate()">Clear Date</button>
<p id="display"></p>
<script>
function setToday() {
var dateInput = document.getElementById("dateField");
var today = new Date();
var formattedDate = today.getFullYear() + '-' +
String(today.getMonth() + 1).padStart(2, '0') + '-' +
String(today.getDate()).padStart(2, '0');
dateInput.value = formattedDate;
updateDisplay();
}
function setCustomDate() {
var dateInput = document.getElementById("dateField");
dateInput.value = "2023-07-04";
updateDisplay();
}
function clearDate() {
var dateInput = document.getElementById("dateField");
dateInput.value = "";
updateDisplay();
}
function updateDisplay() {
var dateInput = document.getElementById("dateField");
var displayText = dateInput.value ? "Current Value: " + dateInput.value : "No date selected";
document.getElementById("display").innerHTML = displayText;
}
</script>
</body>
</html>
This example provides buttons to set different date values and displays the current value −
Current Value: 2023-07-04 (or "No date selected" when cleared)
Complete Example
Following example demonstrates both getting and setting the date value with validation −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Date Input Example</h3>
<form>
<label for="dateSelect">Select Date:</label>
<input type="date" id="dateSelect" value="2015-08-22">
</form>
<br>
<button onclick="changeValue()">Change Value</button>
<button onclick="showValue()">Show Current Value</button>
<div id="divDisplay" style="margin-top: 10px; padding: 10px; background-color: #f0f8ff; border-radius: 5px;"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
// Display initial value
divDisplay.innerHTML = 'Initial value: ' + inputDate.value;
function changeValue() {
var currDate = inputDate.value;
inputDate.value = '1968-02-27';
divDisplay.innerHTML = 'Updated value from: ' + currDate + ' to: ' + inputDate.value;
}
function showValue() {
var currentValue = inputDate.value;
if (currentValue) {
divDisplay.innerHTML = 'Current selected date: ' + currentValue;
} else {
divDisplay.innerHTML = 'No date selected';
}
}
</script>
</body>
</html>
The output shows the date input with buttons to manipulate and display its value −
Initial value: 2015-08-22 (After clicking "Change Value": Updated value from: 2015-08-22 to: 1968-02-27)
Key Points
-
The date value must be in YYYY-MM-DD format (ISO 8601 standard).
-
Invalid date formats will be ignored and the input will show no selected date.
-
An empty string clears the date selection.
-
The property is read-write, allowing both getting and setting values.
-
Browser date picker appearance varies across different browsers and operating systems.
Conclusion
The HTML DOM Input Date value property provides a simple way to get and set date values programmatically. Always use the YYYY-MM-DD format when setting values, and remember that the property returns a string representation of the selected date.
172 Views
