Introduction to JavaScript Date Object
The Date object in JavaScript is predefined data type. This Date object is used to get the dates and times. We can create Date object by using new keyword (newDate ()). The Date object is used for date and time in milliseconds precision within a range of 100M (100 Millions) days before or after the date of 1 January 1970. By using separate methods, we can get and set the year or month or day or hour or minute or second or millisecond in UTC or GMT time format. We can declare date object in 4 ways.
How does Date Object work in JavaScript?
Create Date Object in JavaScript.
- new Date(): It gives present date and time.
- new Date(yyyy, MMM, dd, hh, mm, ss, ms): It gives you date with Year(yyyy), Month(MMM), day(dd), hours(hh), minutes(mm), seconds(ss) and milliseconds(ms) respectively.
- new Date(ms): It gives you date with milliseconds.
- new Date(“Date as String”): It gives you date as String.
Syntax of JavaScript Date Object
Below are the syntax below:
Syntax 1:
<script>
Date date = new Date();
<script>Syntax 2:
<script>
Date dateYMLDHM = new Date(yyyy,MMM,dd,hh,mm,ss,ms);
<script>Syntax 3:
<script>
Date dateMSecs = new Date(ms);
<script>Syntax 4:
<script>
Date dateString = new Date("Date as String");
<script>Examples of JavaScript Date Object
Given below are the examples:
Example #1
Default date with no argument constructor.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="brown">
<h1 align="center">Default Date without any Arguments</h1><!--line1-->
</font>
<script>
function getDefaultDate() {//called function //line2
var date = new Date();//line3
document.write("<h3 style='color:blue'>If we did not provide any argument then Default date is :</h3>"+date);//lin34
}
getDefaultDate();//calling function //line5
</script>
</body>
</html>Output:
Explanation:
- Line 1 defines the heading of the Default date example.
- Line 2 is getDefaultDate() called function for default date creation.
- Line 3 is creating default date with no argument constructor by using new keyword.
- Line 3 is default date that provides current date and time zone in IST format.
- Line 4 is document.write() function that is used to display user output in the browser.
- Line 5 is calling function for getDefaultDate().
Example #2
Date with milliseconds as argument.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="red">
<h1 align="center">Date with MilliSeocnds as argument in constructor</h1><!--line1-->
</font>
<script>
function getMilliSecondsDate() {//called function //line2
vardateMilliseconds = new Date(10000);//line3
document.write("<h3 style='color:green'>If we provide milliseconds as argument then original date is :</h3>"+dateMilliseconds);//lin34
}
getMilliSecondsDate();//calling function //line5
</script>
</body>
</html>Output:
Explanation:
- Line 1 defines the heading of the milliseconds date example.
- Line 2 is getMilliSecondsDate() called function for millseconds date creation.
- Line 3 is creating milliseconds date with milliseconds as argument constructor by using new keyword.
- Line 3 date provides date and time zone in IST format after 1 January 1970 with 10 thousand milliseconds.
- Line 4 is document.write() function used to display user output in the browser.
- Line 5 is calling function for getMilliSecondsDate().
Example #3
Date with string as argument.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="blue">
<h1 align="center">Date with MilliSeocnds as argument in constructor</h1><!--line1-->
</font>
<script>
function getDateString() {//called function //line2
vardateString=new Date("December 28 1993 12:12:12");//line3
document.write("<h3 style='color:red'>If we provide string as argument then original date is :</h3>"+dateString);//line4
}
getDateString();//calling function //line5
</script>
</body>
</html>Output:
Explanation:
- Line 1 defines the heading of the string date example.
- Line 2 is getDateString() called function for string date creation.
- Line 3 is creating milliseconds date with string as argument constructor by using new keyword.
- Line 3 date provides date and time zone in IST format with given string value.
- Line 4 is document.write() function used to display user output in the browser.
- Line 5 is calling function for getDateString().
Example #4
Date with year, month, date, hour, minute, second, millisecond as argument.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="maroon">
<h1 align="center">Date with Year, Month, Date, Hour, Minute, Second, Millisecond as argument in constructor</h1><!--line1-->
</font>
<script>
function getTotalDate() {//called function //line2
vardateYMDHSMs=new Date(2020, 20, 25, 10, 20, 20, 20);//line3
document.write("<h3 style='color:navy'>If we provide Year, Month, Date, Hour, Minute, Second, Millisecond as argument then original date is :</h3>"+dateYMDHSMs);//line4
}
getTotalDate();//calling function //line5
</script>
</body>
</html>Output:
Explanation:
- Line 1 defines the heading of the Year, Month, Date, Hour, Minute, Second, Millisecond date example.
- Line 2 is getTotalDate() called function for Year, Month, Date, Hour, Minute, Second, Millisecond date creation.
- Line 3 is creating date with Year, Month, Date, Hour, Minute, Second, Millisecond as argument constructor by using new keyword.
- Line 3 date provides date and time zone in IST format with given Year, Month, Date, Hour, Minute, Second, Millisecond as values.
- Line 4 is document.write() function used to display user output in the browser.
- Line 5 is calling function for getTotalDate().
Example #5
String date parsing.
Code:
<!DOCTYPE html>
<html>
<body>
<font color="orange">
<h1 align="center">Date parsing with Time (Hours and Minutes Seconds)</h1>
</font>
<script>
function getParseStringDate() {
varstrDate="March 25, 2020 10:10:10 AM";
var parse = Date.parse(strDate);
document.write(strDate+"<span style='color:blue'>=string to date is :"+parse+"</span><br>");
var date = new Date(parse);
document.write("<span style='color:blue'>After converting String to date is :</span>"+date.toString());
}
getParseStringDate();
</script>
</body>
</html>Output:
Explanation:
- JavaScript allows parse method with string containing date and time (hours and minutes seconds).
- Date displayed in milliseconds as 1585111210000.
- 1585111210000Milliseconds again converted to real date format.
- Now both string and after converting string value (date) are same.
Conclusion
Date Object in JavaScript can be created by using default constructor, string as argument constructor, milliseconds as argument constructor, total date and time as argument constructor with new keyword.