• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Javascript Date Object Complete Reference for Beginners

Javascript Date Object Complete Reference for Beginners

By Sigit Prasetya Nugroho ∙ July 18, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Javascript Date objects complete reference. Besides the Math object, the Javascript has a date object that is often used in building web applications. Date Object has functions that can manipulate the date and time in the browser. In this article, we will discuss the functions in date object, and the most frequently tricks used to manage Date and time.

Table of Contents

  • 1 How to create Date in Javascript
  • 2 The function of displaying the date object Javascript
  • 3 The Most Frequently used Date object Function.
    • 3.1 getFullYear()
    • 3.2 getMonth()
    • 3.3 getDate()
    • 3.4 getHours()
    • 3.5 getMinutes()
    • 3.6 getSeconds()
    • 3.7 getMilliseconds()
    • 3.8 getTime()
    • 3.9 getDay()
    • 3.10 Date.now()
  • 4 A collection of tricks for manipulating date objects
    • 4.1 How to get the first date of current month in Javascript
    • 4.2 How to get first date of month in specific year and month Javascript
    • 4.3 How to get last date of current month in Javascript
    • 4.4 How to get last date of month in specific year and month Javascript
    • 4.5 How to convert date object Javascript to MySQL format dates
  • 5 Conclusion

How to create Date in Javascript

Javascript Date Object Tutorial Beginners

Using Date() object to create date and time in Javascript. There are several ways to declare the date object as follows:

new Date()
In general, to create Javascript date and time use new Date(). New date object will display the current time in format string text.

Example:

Related Articles :

  • Tutorial Read And Write CSV File With Javascript
  • Tutorial Javascript Asynchronous, Callbacks ,and Promise
  • Best Way To Learn And Adept Javascript AJAX Quickly

1
2
3
4
let d = new Date()
console.log(d)
//result
Wed Jul 17 2019 23:10:13 GMT+0700 (Indochina Time)

By default, Javascript will calculate the month from 0 as of January and 11 as of December.

Also, Javascript date object has several constructors that can be used to showing the time with the specific conditions.

new Date(year, month, day, hour, minute, second, millisecond)

This way will show the date and time using year, month, day, hour, minute, second, millisecond parameters

Example

1
2
new Date(2019,07,15,20,23,30,0)
//Thu Aug 15 2019 20:23:30 GMT+0700 (Indochina Time)

Beside to declare the certain Date completely (7 parameters from year to the millisecond), Object date also declare the dates until the remaining 2 parameters (year, month)

Example :

1
2
3
4
5
new Date(2019,07,15,20,23,30)
new Date(2019,07,15,20,23)
new Date(2019,07,15,20)
new Date(2019,07,15)
new Date(2019,07)

Javascript Date Based

If you only use 1 parameter (an example new Date(2019)), it will create a new date object in millisecond format.

Example:

1
2
3
4
new Date(0)
//Thu Jan 01 1970 07:00:00 GMT+0700 (Indochina Time)
new Date (2000000000)
//Sat Jan 24 1970 10:33:20 GMT+0700 (Indochina Time)

new Date(date string)

Used to create new date object with format string parameter

Example

1
2
new Date("April 12, 2019 9:16:20");
//Fri Apr 12 2019 09:16:20 GMT+0700 (Indochina Time)

The function of displaying the date object Javascript

By default, new Date() will showing date and time in full format string text

Several functions to showing the date in Javascript.

toUTCString()

Used to showing current date in UTC timezones format

Example:

1
2
3
let d = new Date()
console.log(d.toUTCString())
//"Wed, 17 Jul 2019 16:18:20 GMT"

toDateString()

Used to showing date and time in readable format

Example:

1
2
3
let d = new Date()
console.log(d.toDateString())
//"Wed Jul 17 2019"

toLocaleString()

Used to showing the date formats in locale string

Example:

1
2
3
let d = new Date()
console.log(d.toLocaleString());    
//"7/17/2019, 11:18:20 PM"

toLocaleDateString()

The function to displaying the date formats in string data type.

1
2
3
let d = new Date()
console.log(d.toLocaleDateString());  
//"7/17/2019"

toLocaleTimeString()

Used to showing local time format

Example:

1
2
3
let d = new Date()
console.log(d.toLocaleTimeString());
//"11:18:20 PM"

The following are some of the functions most often used in making web applications.

The Most Frequently used Date object Function.

getFullYear()

The function used to get year info from date() object

Example:

1
2
3
let d = new Date()
console.log(d.getFullYear())
//2019

getMonth()

Function used to get month info in date object (0 as January – 11 as December)

Example

1
2
3
let d = new Date()
console.log(d.getMonth())
//7

getDate()

Function to showing day from 1 – 31

Example

1
2
3
let d = new Date()
console.log(d.getDate())
//16

getHours()

Function to displaying time in hours (0 – 23)

Example

1
2
3
let d = new Date()
console.log(d.getHours())
//22

getMinutes()

Function used to showing minutes (0 – 59)

Example

1
2
3
let d = new Date()
console.log(d.getMinutes())
//32

getSeconds()

Date() object function to showing seconds (0 – 59)

Example

1
2
3
let d = new Date()
console.log(d.getSeconds())
//23

getMilliseconds()

Used to showing milliseconds (0 until 999 millisecond)

Example

1
2
3
let d = new Date()
console.log(d.getMilliseconds())
//457

getTime()

Used to get the time

Example

1
2
3
let d = new Date()
console.log(d.getTime())
//1563380300476

getDay()

Javascript function to get day in number format(0 – 6)

Example

1
2
3
let d = new Date()
console.log(d.getDay())
//3

Date.now()

Used to get the current time in millisecond like getTIme() ( ECMAScript 5).

A collection of tricks for manipulating date objects

How to get the first date of current month in Javascript

1
2
3
4
5
function start_date(){
  let date = new Date(), y = date.getFullYear(), m = date.getMonth();
  let firstDay = new Date(y, m, 1);
  return firstDay;
}

Above function used to get the first date of month, see the example below:

1
2
console.log(start_date());
// result : Mon Jul 01 2019 00:00:00 GMT+0700 (Western Indonesia Time)

How to get first date of month in specific year and month Javascript

1
2
3
4
function start_date_by_month_year(m,y){
  let firstDay = new Date(y, m-1, 1);
  return firstDay;
}

How to use:

1
start_date_by_month_year(4,2019)

How to get last date of current month in Javascript

1
2
3
4
5
function end_date(){
let date = new Date(), y = date.getFullYear(), m = date.getMonth();
let lastDay = new Date(y, m + 1, 0);
return lastDay;
}

The above function will return the last date of current month

1
2
console.log(end_date())
// result Wed Jul 31 2019 00:00:00 GMT+0700 (Western Indonesia Time)

How to get last date of month in specific year and month Javascript

1
2
3
4
function end_date_by_month_year(m,y){
let lastDay = new Date(y, m, 0);
return lastDay;
}

How to use:

1
end_date_by_month_year(8,2019)

How to convert date object Javascript to MySQL format dates

1
2
3
4
5
6
7
8
function formatMysqlDate(objDate) {
  month = '' + (objDate.getMonth() + 1),
  day = '' + objDate.getDate(),
  year = objDate.getFullYear();
  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;
  return [year, month, day].join('-');
}

Example:

1
2
3
let objDate = new Date();
console.log( formatMysqlDate(objDate) )
//result : 2019-07-16

Conclusion

Javascript provides several objects used to speed up building web apps. Showing date in Javascript with date object is support all browser.

Thus my tutorial about javascript date object, Look forward to the next tutorial javascript here

Reference : https://developer.mozilla.org/id/docs/Web/JavaScript/Reference/Global_Objects/Date

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com