Date Methods And Properties In Javascript

Let’s discuss another important part of Javascript which is Date object, it is built into javascript language. In this tutorial we will discuss two main parts which are; Date Properties and Date Methods. Date object are created with new date(). Then it allows you to get and set year, month, hour, second, millisecond using either local time or UTC time. Let’s have syntaxes which are used create Date object;
    
 new Date()
 new Date(milliseconds)
 new Date(datestring)
 new Date(year,month,date[,hour,minute,second,millisecond])
    

where the arguments represents;
Date() -Which has no arguments, it creates a Date object which is set to current date and time.
Date(milliseconds) -When one numeric argument is passed, it returns date in milliseconds using getTime()method.
Date(datestring) -when the string is passed, it represents a date formatted by Date.parse() method.
second -It represents the second segment.
millisecond -It represents the millisecond segment.
Year -It represents the year, where the year is specified in full.
month -It will represents the month, whereby December is represented by 11 and January 0.
date -It represents the day of the month.
hour -It represents the hour of the day, which is normally in 24 hour clock system.
minute -It represents the minute segment.

1. Date Properties

Here we will discuss first part of our tutorial today, whereby we will discuss date properties which may include; constructor and prototype. We will explain each and give out relevant examples.
a) constructor
As we discussed constructor in other objects it returns the array function used to create the instances prototype. Let’s look at its syntax;

 date.constructor


For better understanding we will be looking at this example below;
<head>
<title>Example for constructor date property</title>
</head>
<body>
<script type="text/javascript">
var dt = new Date();
document.write("date.constructor is : " + dt.constructor);
</script>
</body>

It will produce the array function used in creating the object, in this case is native code;

b) Prototype

As we discussed this property in other objects it adds methods and properties to any object such as number, date, string. We may have it’s syntax as; object.prototype.name=value for better understanding let’s have an example;

<head>
<title>Example for prototype</title>
<script type="text/javascript">
function phone(type, android){
this.type = type;
this.android = android;
}
</script>
</head>
<body>
<script type="text/javascript">
var myPhone = new phone("Tecno", "9");
phone.prototype.price = null;
myPhone.price = 10000;
document.write("Phone type is : " + myPhone.type + "<br>");
document.write("Phone android is : " + myPhone.android + "<br>");
document.write("Phone price is : " + myPhone.price + "<br>");
</script>
</body>

It will produce;
Phone type is: Tecno
Phone android is: 9
Phone price is: 10000

2. Date Methods

Our second part of our tutorial, we will discuss date methods which may include; date(), getDate, getDay(), getFullYear(), getMinutes(), getSeconds(), getHours(), getMonth(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMiliseconds(), setYear(), setHours(), setSeconds(), setTime(), setUTCDate(), setUTCFullYear(), setUTCMibutes(), valueOf(). toLocaleString(), toDateString(), toGMTString(), toString, toSource, toUTCstring() among others. You will realize they seems many but they all common with similar syntaxes and examples so we will discuss each, giving out relevant examples take them easy, we are going to simplify them for better understanding;

a) Date()

It returns the current date and time, it has a syntax of; Date() to be called it requires no object, Let’s have an example for better understanding;

<head>
<title>Example for date method</title>
</head>
<body>
<script type="text/javascript">
var dt = Date();
document.write("Date and Time : " + dt );
</script>
</body>

It will produce;
The current date and date, it all depends with your location, for instance it may show;
Fri jun 12 2021 10:20:45 GMT+0530

b) getDate()

It returns the day of the month according to the local time; whereby it returns the integer between 1 and 31. We may its syntax as; Date.getDate() let’s have an example for better understanding;

<head>
<title>Example for getDate mathod</title>
</head>
<body>
<script type="text/javascript">
var dt = new Date("June 12, 2021 10:30:00");
document.write("getDate() : " + dt.getDate() );
</script>
</body>

It will produce;
getDate(): 12

Let’s discuss now the date methods which follow the above format of the example and syntax to avoid repetition of the same thing, they are as folllows;

  • getDay() -It returns the day of the week for the specified date according to local time. The integer returned is between 0-6, where Sunday is 0 and Saturday is 6. Syntax is; Date.getDay()
  • getFullYear() -It returns the year of the specified date according to local time. It returns value between 1000 and 9999 years, which is normally four-digit number, for instance we may have; 2021 the syntax is Date.getFullYear()
  • getHours() -It returns the hour in the specified date according to local time, it returns values between 0 and 23. The syntax is; Date.getHours()
  • getMilliseconds() -It returns the milliseconds in the specified date according to local time. it’s values are between 0 and 999, we may have it’s syntax as; Date.getMilliseconds()
  • getMinutes() -It returns the minutes in the specified date according to local time. it’s values returned are between 0 and 59. We may have its syntax as; Date.getMinutes()
  • getMonth() -It returns the month in the specified date according to local time. The values are between 0 and 11, where January is 0 and December is 11. It’s syntax is; Date.getMonth()
  • getSeconds() -It returns the seconds in the specified date according to local time. Th values returned are between 0 and 59. It’s syntax is as follows; Date.getSeconds()
  • getTime() -It returns the numeric value that corresponds to the time for the specified date according to universal time. The values returned are number of milliseconds since 1 January 1970 00:00:00, we may have its syntax as Date.getTime()
  • getUTCDate() -It returns the day of the month in the specified date according to universal time. The values returned are between 1 and 31. It’s syntax is; Date.getUTCDate()
  • getUTCDay() -It returns the day of the week for the specified date according to universal time. The integer returned is between 0-6, where Sunday is 0 and Saturday is 6. Syntax is; Date.getUTCDay()
  • getUTCFullYear() -It returns the year of the specified date according to universal time. It returns value between 1000 and 9999 years, which is normally four-digit number, for instance we may have; 2021 the syntax is Date.getUTCFullYear()
  • getUTCHours() -It returns the hour in the specified date according universal time, it returns values between 0 and 23. The syntax is; Date.getUTCHours()
  • getUTCMilliseconds() -It returns the milliseconds in the specified date according to universal time. it’s values are between 0 and 999, we may have it’s syntax as; Date.getUTCMilliseconds()
  • getUTCMinutes() -It returns the minutes in the specified date according to universal time time. it’s values returned are between 0 and 59. We may have its syntax as; Date.getUTCMinutes()
  • getUTCMonth() -It returns the month in the specified date according to universal time. The values are between 0 and 11, where January is 0 and December is 11. It’s syntax is; Date.getUTCMonth()
  • getUTCSeconds() -It returns the seconds in the specified date according to universal time. Th values returned are between 0 and 59. It’s syntax is as follows; Date.getUTCSeconds()

NB. Remember the above discussed methods are similar and for better understanding you may try them yourself, using the example give for getDate() and just replace with any other method above;

c) setDate()

It sets the day of the month for a specified date according to local time, we may have its syntax as; Date.setDate(dayValue), where dayValue stands for values between 1 and 31. Let’s have an example;

<head>
<title>Example for setDate method</title>
</head>
<body>
<script type="text/javascript">
var dt = new Date( "July 20, 1998 22:30:00" );
dt.setDate( 12 );
document.write( dt );
</script>
</body>

It will setDate according to the local time of the specified date for instance we may have;
Fri Jun 12 2021 10:50:00 GMT+0530

In this section we will explain the return values of the date methods that follow the same format as illustrated above and the syntaxes are similar, therefore will be easy for you to understand using the same example given above;

  • setFullYear() -It sets the full year for a specified date according to local time, the values it returns a four digit number for instance, 1998. We may have it’s syntax as; Date.setFUllYear(yearvalue)
  • setHours() -It sets the hours for a specified date according to local time, the returned values are between 0 and 23, we may have it’s syntax as follows; Date.setHours(hoursvalue)
  • setMilliseconds() -It sets the milliseconds of the specified date according to the local time. values returned are between 0 and 999. We may have it’s syntax as; Date.setMilliseconds(millisecondsvalue)
  • setMinutes() -It sets the minutes for a specified date according to the local time, the values returned are between 0 and 59. We may have it’s syntax as follows; Date.setMinutes(minutesvalue)
  • setMonth() -It sets the month for a specified date according to local time, the values returned are between 0 and 11, where 0 is January and 11 December, we may have its syntax as follows; Date.setMonth(monthvalue)
  • setSeconds() -It sets the seconds for a specified date according to local time, the values returned are between 0 and 59. We have it’s syntax as; Date.setSeconds(secondsvalue)
  • setTime() -It sets the date object to the time which is represented by the number of milliseconds from January 1, 1970 00:00:00.We have it’s syntax as; Date.setTime(timeValue)
  • setUTCDate() -It sets day of the month for a specified date according to universal time. Values returned are between 1 and 31. We may it’s syntax as; Date.setUTCDate(dayValue)
  • setUTCFullYear() -It sets the full year for a specified date according to univesal time, the values it returns a four digit number for instance, 1998. We may have it’s syntax as; Date.setUTCFUllYear(yearvalue)
  • setUTCHours() -It sets the hours for a specified date according to universal time, the returned values are between 0 and 23, we may have it’s syntax as follows; Date.setUTCHours(hoursvalue)
  • setUTCMilliseconds() -It sets the milliseconds of the specified date according to the universal time. values returned are between 0 and 999. We may have it’s syntax as; Date.setUTCMilliseconds(millisecondsvalue)
  • setUTCMinutes() -It sets the minutes for a specified date according to the universal time, the values returned are between 0 and 59. We may have it’s syntax as follows; Date.setUTCMinutes(minutesvalue)
  • setUTCMonth() -It sets the month for a specified date according to universal time, the values returned are between 0 and 11, where 0 is January and 11 December, we may have its syntax as follows; Date.setUTCMonth(monthvalue)
  • setUTCSeconds() -It sets the seconds for a specified date according to universal time, the values returned are between 0 and 59. We have it’s syntax as; Date.setUTCSeconds(secondsvalue)

NB. Remember the parameters in brackets are optional, you will use the same example given above and the other illustrated date methods above, they are similar take it easy for better understanding.

d) toDateString()

It returns the date portion of a Date object in human readable form. We may have it’s syntax as follows; Date.toDateString(), Let’s have an example;

<head>
<title>Example for toDateString method</title>
</head>
<body>
<script type="text/javascript">
var dt = new Date(2021, 6, 12, 14, 39, 7);
document.write( "Formated Date is: " + dt.toDateString() );
</script>
</body>

It will produce;
Formatted Date is: Fri Jun 12 2021

e) toSource()

It returns the string representing the source code of the object, we may have it’s syntax as; Date.toSource(), here is an example;

<head>
<title>Example for toSource method</title>
</head>
<body>
<script type="text/javascript">
var dt = new Date(1993, 6, 28, 14, 39, 7);
document.write( "Formated Date is: " + dt.toSource() );
</script>
</body>

It will produce;
Formatted date is: (new Date(7562657000))

f) valueOf()

It returns the primitive value of a Date object as a number data type, the value returned equals to the number of milliseconds since the 01 January 1970 00:00:00, we may have it’s syntax as follows; Date.valueOf(), here is an example;

<head>
<title>JExample for valueOf Method</title>
</head>
<body>
<script type="text/javascript">
var dateobject = new Date(1993, 6, 28, 14, 39, 7);
document.write( dateobject.valueOf() );
</script>
</body>

It will produce;
74385054700

With that from our todays tutorial we managed to develop a digital watch, you may also be interested in reading it here;DIGITAL WATCH. For live sessions and other presentations on programming subscribe to our YouTube channel;YOUTUBE LINK. Tanks for reading through our tutorial, as we continue advancing in Javascript I will be happy to see you in my next tutorial.