Below programs illustrate the Date Object
Example 1: In this example we creates a date input field upon double-clicking the “Create” button. However, the value provided is invalid as it includes an incorrect time format.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Object</title>
</head>
<body>
<h2>Input Date Object</h2>
<p>Double Click the "Create" button
to create a Date field.
</p>
<button ondblclick="Create()">Create
</button>
<script>
function Create() {
// create input element type date.
let c = document.createElement("INPUT");
c.setAttribute("type", "date");
c.setAttribute("value", "2019-07-02T25:32Z");
document.body.appendChild(c);
}
</script>
</body>
</html>
Output:
Example 2: In this example we demonstrates accessing a date input field and displaying its value upon double-clicking the “Access” button. The input field is pre-filled with an invalid time value.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Object</title>
</head>
<body>
<h2>Input Date Object</h2>
<input type="date" id="test" value="2019-07-02T25:32Z" />
<p>
Double Click the "Access" button to
access a Date field.
</p>
<button ondblclick="Access()">
Access
</button>
<p id="check"></p>
<script>
function Access() {
// Accessing input element type =”date”
var a =
document.getElementById(
"test"
).value;
document.getElementById(
"check"
).innerHTML = a;
}
</script>
</body>
</html>
Output:
Supported Browsers:
HTML DOM Input Date Object
HTML Input Date object represents an <input> element with type=”date”, enabling users to input dates conveniently via a built-in calendar interface on web forms.
Syntax:
- For creating a <input> element with the type =”date”:
var gfg = document.createElement("input")
gfg.setAttribute("type", "date");
- For accessing a <input> element with the type =”date”:
document.getElementById("date_object")
Property Values:
Value | Description |
---|---|
autocomplete | It is used for setting or returning the value of the autocomplete attribute of a datetime field. |
autofocus | It is used for setting or returning whether a datetime field should automatically get focus when the page loads. |
defaultValue | It is used for setting or returning the default value of a datetime field. |
disabled | It is used for setting or returning whether a datetime field is disabled, or not. |
form | It is used for returning a reference to the form that contains the datetime field. |
list | It is used for returning a reference to the datalist that contains the datetime field. |
max | It is used for setting or returning the value of the max attribute of the datetime field. |
min | Sets or returns the value of the min attribute of the datetime field. |
name | It is used for setting or returning the value of the name attribute of a datetime field. |
readOnly | It is used for setting or returning whether the datetime field is read-only, or not. |
required | It is used for setting or returning whether the datetime field must be filled out before submitting a form. |
step | It is used for setting or returning the value of the step attribute of the datetime field. |
type | It is used for returning which type of form element the datetime field is. |
value | It is used for setting or returning the value of the value attribute of a datetime field. |
Input Date Object Methods:
Method | Description |
---|---|
stepDown() | Decrements the value of the input date field by a specified number. |
stepUp() | Increments the value of the input date field by a specified number. |
select() | Selects the content of the input date field. |