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 Object
The HTML DOM Input Date Object represents an HTML <input> element with type="date". This object provides a date picker interface that allows users to select a date from a calendar widget, and it offers various properties and methods for programmatic control.
Syntax
Following is the syntax to create an input date element using JavaScript −
var dateObject = document.createElement("input");
dateObject.type = "date";
You can also access an existing input date element −
var dateObject = document.getElementById("dateId");
Properties
The Input Date Object supports the following properties −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the value of the autocomplete attribute of the date field |
| autofocus | Sets or returns whether the date field should be focused when the page loads |
| defaultValue | Sets or returns the default value of the date field |
| disabled | Sets or returns whether the date field is disabled |
| form | Returns a reference to the form that contains the date field |
| max | Sets or returns the value of the max attribute of the date field |
| min | Sets or returns the value of the min attribute of the date field |
| name | Sets or returns the value of the name attribute of the date field |
| readOnly | Sets or returns whether the date field is read-only |
| required | Sets or returns whether the date field must be filled out before submitting the form |
| step | Sets or returns the value of the step attribute of the date field |
| type | Returns the type of form element the date field is |
| value | Sets or returns the value of the value attribute of the date field |
Methods
The Input Date Object supports the following methods −
| Method | Description |
|---|---|
| stepDown() | Decrements the value of the date field by a specified number |
| stepUp() | Increments the value of the date field by a specified number |
Example − Creating Input Date Object
Following example demonstrates how to create an input date element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Creating Input Date Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Dynamic Date Input Creation</h3>
<button onclick="createDateInput()">Create Date Input</button>
<div id="container"></div>
<script>
function createDateInput() {
var dateInput = document.createElement("input");
dateInput.type = "date";
dateInput.id = "myDate";
dateInput.name = "selectedDate";
dateInput.value = "2024-01-01";
var container = document.getElementById("container");
container.innerHTML = "<p>Select a date: </p>";
container.appendChild(dateInput);
}
</script>
</body>
</html>
The output shows a button that creates a date input field when clicked −
Dynamic Date Input Creation [Create Date Input] (After clicking: Select a date: [date picker with 2024-01-01])
Example − Input Date Max Property
Following example demonstrates the max property of the Input Date Object −
<!DOCTYPE html>
<html>
<head>
<title>Input Date Max Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Date Input with Max Limit</h3>
<form>
Date Select: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="changeMaxDate()">Change Max Date</button>
<div id="display" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var inputDate = document.getElementById("date");
var display = document.getElementById("display");
display.textContent = 'Current max date: ' + inputDate.max;
function changeMaxDate() {
inputDate.max = '2025-12-31';
display.textContent = 'Updated max date: ' + inputDate.max;
}
</script>
</body>
</html>
The output displays the current max date and allows changing it −
Date Input with Max Limit Date Select: [date picker] [Change Max Date] Current max date: 2018-12-31 (After clicking button: Updated max date: 2025-12-31)
Example − Using Min and Max Properties
Following example shows how to use both min and max properties to create a date range −
<!DOCTYPE html>
<html>
<head>
<title>Date Range Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Date Selection with Range</h3>
<form>
<label for="appointmentDate">Select Appointment Date:</label>
<input type="date" id="appointmentDate" min="2024-01-01" max="2024-12-31">
</form>
<button onclick="showDateInfo()">Show Date Info</button>
<div id="info" style="margin-top: 10px; padding: 10px; background-color: #e8f4fd;"></div>
<script>
function showDateInfo() {
var dateInput = document.getElementById("appointmentDate");
var info = document.getElementById("info");
var infoText = "Min Date: " + dateInput.min + "<br>";
infoText += "Max Date: " + dateInput.max + "<br>";
infoText += "Selected Date: " + (dateInput.value || "None selected");
info.innerHTML = infoText;
}
</script>
</body>
</html>
This example restricts date selection to the year 2024 and displays the range information −
Date Selection with Range Select Appointment Date: [date picker limited to 2024] [Show Date Info] Min Date: 2024-01-01 Max Date: 2024-12-31 Selected Date: (shows selected date or "None selected")
Example − Step Methods
Following example demonstrates the stepUp() and stepDown() methods −
<!DOCTYPE html>
<html>
<head>
<title>Date Step Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Date Step Controls</h3>
<input type="date" id="stepDate" value="2024-06-15">
<br><br>
<button onclick="stepUpDate()">Step Up (Next Day)</button>
<button onclick="stepDownDate()">Step Down (Previous Day)</button>
<div id="currentDate" style="margin-top: 10px; font-weight: bold;"></div>
<script>
var dateInput = document.getElementById("stepDate");
var currentDate = document.getElementById("currentDate");
updateDisplay();
function stepUpDate() {
dateInput.stepUp(1);
updateDisplay();
}
function stepDownDate() {
dateInput.stepDown(1);
updateDisplay();
}
function updateDisplay() {
currentDate.textContent = "Current Date: " + dateInput.value;
}
</script>
</body>
</html>
The step methods allow programmatically incrementing or decrementing the date value −
Date Step Controls [date picker showing 2024-06-15] [Step Up (Next Day)] [Step Down (Previous Day)] Current Date: 2024-06-15 (Buttons change the date by one day forward or backward)
Conclusion
The HTML DOM Input Date Object provides comprehensive control over date input elements through its properties and methods. It enables setting date ranges with min and max, manipulating values programmatically with stepUp() and stepDown(), and accessing all standard input properties for form validation and user interaction.
262 Views
