⚡️Retrieving Date Components
You can retrieve various parts of a date using the **get method** in the following ways :
Method | Description |
|---|---|
getFullYear() | Get year as a four digit number (yyyy) |
getMonth() | Get month as a number (0-11) |
getDate() | Get day as a number (1-31) |
getDay() | Get weekday as a number (0-6) |
getHours() | Get hour (0-23) |
getMinutes() | Get minute (0-59) |
getSeconds() | Get second (0-59) |
getMilliseconds() | Get millisecond (0-999) |
getTime() | Get time (milliseconds since January 1, 1970) |
📝The get methods above return Local time.
Note: These methods can also be used with new Date() to get the current time.
✅ getFullYear() Method
The getFullYear() method returns the year of a date as a four digit number:
const d = new Date("2021-03-25");
d.getFullYear(); //2021💡getMonth() Method
The getMonth() method returns the month of a date as a number (0-11).
const d = new Date("2025-06-12");
d.getMonth(); //6💠 getDate() Method
The getDate() method returns the day of a date as a number (1-31).
const d = new Date("2021-03-25");
d.getDate(); //25📍 getHours() Method
The getHours() method returns the hours of a date as a number (0-23).
Example :
const d = new Date("2021-03-25");
d.getHours(); //5✒️ getMinutes() Method
The getMinutes() method returns the minutes of a date as a number (0-59).
Example :
const d = new Date("2022-03-31");
d.getMinutes(); //30🏷️ getSeconds() Method
The getSeconds() method returns the seconds of a date as a number (0-59).
Example :
const d = new Date("2021-03-25");
d.getSeconds(); //30▶️ getMilliseconds() Method
The getMilliseconds() method returns the milliseconds of a date as a number (0-999).
Example :
const d = new Date("2021-03-25");
d.getMilliseconds(); //0📚 getDay() Method
The getDay() method returns the weekday of a date as a number (0-6).
In JavaScript, the first day of the week (day 0) is Sunday.
Example :
const d = new Date("2024-06-10");
d.getDay(); //1📝Note
You can use an array of names, and getDay() to return weekday as a name:
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const d = new Date();
let day = days[d.getDay()]; //Tuesday❇️ getTime() Method
The getTime() method returns the number of milliseconds since January 1, 1970.
Example :
const d = new Date("1978-01-01");
d.getTime(); //252460800000✔️ Manipulating Dates
You can modify various parts of a date using the set method in the following ways:
Method | Description |
|---|---|
setDate() | Set the day as a number (1-31) |
setFullYear() | Set the year (yyyy) |
setHours() | Set the hour (0-23) |
setMilliseconds() | Set the milliseconds (0-999) |
setMinutes() | Set the minutes (0-59) |
setMonth() | Set the month (0-11) |
setSeconds() | Set the seconds (0-59) |
setTime() | Set the time (milliseconds since January 1, 1970) |
Note: These methods can also be used with
new Date()to get current time.
🧩 setFullYear() Method
The setFullYear() method sets the year of a date object.
Example :
const d = new Date("Jan 01, 2025");
d.setFullYear(2029); // Jan 01 2029setFullYear()method can optionally set month and day.
Example :
const d = new Date("Jan 01, 2025");
d.setFullYear(2020, 11, 3); // Dec 03 2020🔅 setMonth() Method
The setMonth() method sets the month of a date object (0-11).
Example :
const d = new Date("Jan 01, 2025");
d.setMonth(11); //Dec 01 2025 🔰 setDate() Method
The setDate() method sets the day of a date object (1-31).
Example :
const d = new Date("May 01, 2025");
d.setDate(15); // May 15 2025 setDate()method can also be used to add days to a date.
Example :
const d = new Date("Jan 01, 2025");
d.setDate(d.getDate() + 50); //Feb 20 2025🔴 setHours() Method
The setHours() method sets the hours of a date object (0-23).
Example :
const d = new Date("Jan 01, 2025");
d.setHours(22); //Jan 01 2025 22:00:00setHours()method can also be used to set minutes and seconds.
Example :
const d = new Date("Jan 01, 2025");
d.setHours(22, 10, 20); //Jan 01 2025 22:10:20 🖇️ setMinutes() Method
The setMinutes() method sets the minutes of a date object (0-59).
Example :
const d = new Date("Jan 01, 2025");
d.setMinutes(30); //Jan 01 2025 00:30:00 ♦️ setSeconds() Method
The setSeconds() method sets the seconds of a date object (0-59).
Example :
const d = new Date("Jan 01, 2025");
d.setSeconds(30); //Jan 01 2025 00:00:30<div class="infographic-datepg2">
<style>
.infographic-datepg2 {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--line: #ddd6c9;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--ok: #1a7f4e;
--ok-soft: #e3f5ec;
--warn: #b45309;
--warn-soft: #fdf0dc;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', -apple-system, sans-serif;
--mono-font: 'IBM Plex Mono', 'Courier New', monospace;
margin: 0 auto;
box-sizing: border-box;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-datepg2[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--line: #2c313d;
--accent: #5b8def;
--accent-soft:#202942;
--ok: #5cd6a0;
--ok-soft: #16342a;
--warn: #e0a458;
--warn-soft: #3a2c14;
}
.infographic-datepg2 * { box-sizing: border-box; }
.infographic-datepg2 .ig-inner { padding: 1.75rem clamp(1.25rem, 5vw, 3rem) 2rem; }
.infographic-datepg2 .ig-title {
font-family: var(--display-font); font-size: clamp(1.4rem, 4.5vw, 1.9rem);
font-weight: 600; text-align: center; margin: 0 0 1.25rem;
}
.infographic-datepg2 .current-box {
text-align: center; font-family: var(--mono-font); font-size: 0.85rem; font-weight: 700;
border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent);
border-radius: 10px; padding: 0.7rem; margin-bottom: 0.5rem; transition: transform 0.2s ease;
}
.infographic-datepg2 .current-box.pulse { animation: dpg-pulse 0.35s ease; }
@keyframes dpg-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }
.infographic-datepg2 .current-sub { text-align: center; font-size: 0.7rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.infographic-datepg2 .reset-row { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.infographic-datepg2 .reset-btn {
font: inherit; font-size: 0.75rem; font-weight: 700; font-family: var(--mono-font); border: 1px solid var(--line);
background: transparent; color: var(--ink-soft); padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer;
}
.infographic-datepg2 .reset-btn:hover { border-color: var(--accent); color: var(--accent); }
.infographic-datepg2 .tabs { display: flex; gap: 0.4rem; justify-content: center; }
.infographic-datepg2 .tab {
font: inherit; font-size: 0.8rem; font-weight: 700; border: 1px solid var(--line);
background: var(--paper); color: var(--ink-soft); padding: 0.42rem 1.1rem;
border-radius: 999px; cursor: pointer;
}
.infographic-datepg2 .tab.is-active.get-tone { background: var(--ok); color: #fff; border-color: var(--ok); }
.infographic-datepg2 .tab.is-active.set-tone { background: var(--warn); color: #fff; border-color: var(--warn); }
.infographic-datepg2 .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.infographic-datepg2 .chip {
font: inherit; font-size: 0.76rem; font-weight: 700; font-family: var(--mono-font);
border: 1px solid var(--line); background: var(--paper-alt); color: var(--ink);
padding: 0.35rem 0.7rem; border-radius: 6px; cursor: pointer;
}
.infographic-datepg2 .chip.is-active.get-tone { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.infographic-datepg2 .chip.is-active.set-tone { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.infographic-datepg2 .playground {
margin-top: 1.25rem; background: var(--paper-alt); border: 1px solid var(--line); padding: 1.1rem 1rem;
}
.infographic-datepg2 .inputs-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 0.9rem; }
.infographic-datepg2 .field { display: flex; flex-direction: column; align-items: center; }
.infographic-datepg2 .field-tag { font-size: 0.6rem; font-family: var(--mono-font); color: var(--ink-soft); margin-bottom: 0.25rem; }
.infographic-datepg2 .field input {
width: 4.4rem; height: 2.2rem; font-family: var(--mono-font); font-size: 0.82rem; text-align: center;
border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 5px; outline: none;
}
.infographic-datepg2 .field input:focus { border-color: var(--accent); }
.infographic-datepg2 .call-line {
font-family: var(--mono-font); font-size: 0.85rem; text-align: center; font-weight: 700;
padding: 0.5rem 0.8rem; border-radius: 6px; margin-bottom: 0.8rem;
}
.infographic-datepg2 .call-line.get-tone { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
.infographic-datepg2 .call-line.set-tone { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); }
.infographic-datepg2 .run-row { display: flex; justify-content: center; }
.infographic-datepg2 .run-btn {
font: inherit; font-size: 0.82rem; font-weight: 700; border: none; color: #fff;
padding: 0.5rem 1.2rem; border-radius: 999px; cursor: pointer;
}
.infographic-datepg2 .run-btn.get-tone { background: var(--ok); }
.infographic-datepg2 .run-btn.set-tone { background: var(--warn); }
.infographic-datepg2 .run-btn:hover { opacity: 0.9; }
.infographic-datepg2 .caption {
text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.9rem; min-height: 1.2em;
}
.infographic-datepg2 .caption strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
.infographic-datepg2 *, .infographic-datepg2 *::before, .infographic-datepg2 *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="ig-inner">
<h2 class="ig-title">Getting & Setting Date Parts</h2>
<div class="current-box" id="currentBox"></div>
<div class="current-sub">the current date object — every action below works on this</div>
<div class="reset-row"><button class="reset-btn" id="resetBtn">⟲ Reset date</button></div>
<div class="tabs" id="tabs">
<button class="tab is-active get-tone" data-cat="get">Get</button>
<button class="tab set-tone" data-cat="set">Set</button>
</div>
<div class="chips" id="chips"></div>
<div class="playground">
<div class="inputs-row" id="inputsRow"></div>
<div class="call-line" id="callLine"></div>
<div class="run-row"><button class="run-btn" id="runBtn">▶ Run</button></div>
</div>
<p class="caption" id="caption"></p>
</div>
</div>
<script>
(function () {
const wrapper = document.currentScript.closest('.infographic-datepg2')
|| document.querySelector('.infographic-datepg2');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
const INITIAL = () => new Date(2021, 2, 25, 5, 30, 30, 0); // Mar 25 2021, 05:30:30.000
let d = INITIAL();
const currentBox = wrapper.querySelector('#currentBox');
const resetBtn = wrapper.querySelector('#resetBtn');
const tabsEl = wrapper.querySelector('#tabs');
const chipsEl = wrapper.querySelector('#chips');
const inputsRow = wrapper.querySelector('#inputsRow');
const callLine = wrapper.querySelector('#callLine');
const runBtn = wrapper.querySelector('#runBtn');
const caption = wrapper.querySelector('#caption');
function renderCurrent(pulse) {
currentBox.textContent = d.toString();
if (pulse) {
currentBox.classList.add('pulse');
setTimeout(() => currentBox.classList.remove('pulse'), 350);
}
}
const GET_METHODS = [
{ id: 'getFullYear', label: 'getFullYear()', run: () => d.getFullYear() },
{ id: 'getMonth', label: 'getMonth()', run: () => d.getMonth() },
{ id: 'getDate', label: 'getDate()', run: () => d.getDate() },
{ id: 'getDay', label: 'getDay()', run: () => d.getDay() },
{ id: 'getHours', label: 'getHours()', run: () => d.getHours() },
{ id: 'getMinutes', label: 'getMinutes()', run: () => d.getMinutes() },
{ id: 'getSeconds', label: 'getSeconds()', run: () => d.getSeconds() },
{ id: 'getMilliseconds', label: 'getMilliseconds()', run: () => d.getMilliseconds() },
{ id: 'getTime', label: 'getTime()', run: () => d.getTime() }
];
const SET_METHODS = [
{ id: 'setFullYear', label: 'setFullYear()', inputs: [{ key: 'y', tag: 'year', default: '2029' }], run: v => d.setFullYear(Number(v.y)) },
{ id: 'setMonth', label: 'setMonth()', inputs: [{ key: 'm', tag: 'month', default: '11' }], run: v => d.setMonth(Number(v.m)) },
{ id: 'setDate', label: 'setDate()', inputs: [{ key: 'dd', tag: 'day', default: '15' }], run: v => d.setDate(Number(v.dd)) },
{ id: 'setHours', label: 'setHours()', inputs: [{ key: 'h', tag: 'hour', default: '22' }], run: v => d.setHours(Number(v.h)) },
{ id: 'setMinutes', label: 'setMinutes()', inputs: [{ key: 'mi', tag: 'min', default: '30' }], run: v => d.setMinutes(Number(v.mi)) },
{ id: 'setSeconds', label: 'setSeconds()', inputs: [{ key: 's', tag: 'sec', default: '30' }], run: v => d.setSeconds(Number(v.s)) },
{ id: 'setMilliseconds', label: 'setMilliseconds()', inputs: [{ key: 'ms', tag: 'ms', default: '500' }], run: v => d.setMilliseconds(Number(v.ms)) },
{ id: 'setTime', label: 'setTime()', inputs: [{ key: 't', tag: 'ms since epoch', default: '1000000000000' }], run: v => d.setTime(Number(v.t)) }
];
let currentCat = 'get';
let currentMethod = GET_METHODS[0];
let values = {};
function tone() { return currentCat; }
function buildInputs() {
inputsRow.innerHTML = '';
values = {};
const inputs = currentMethod.inputs || [];
inputs.forEach(spec => {
values[spec.key] = spec.default;
const field = document.createElement('div');
field.className = 'field';
const tag = document.createElement('span');
tag.className = 'field-tag';
tag.textContent = spec.tag;
const input = document.createElement('input');
input.type = 'text';
input.value = spec.default;
input.addEventListener('input', () => { values[spec.key] = input.value; updateCallLine(); });
field.appendChild(tag);
field.appendChild(input);
inputsRow.appendChild(field);
});
updateCallLine();
}
function updateCallLine() {
callLine.className = `call-line ${tone()}-tone`;
if (currentCat === 'get') {
callLine.textContent = `d.${currentMethod.id}()`;
} else {
const args = (currentMethod.inputs || []).map(spec => values[spec.key]).join(', ');
callLine.textContent = `d.${currentMethod.id}(${args})`;
}
}
function selectMethod(method) {
currentMethod = method;
wrapper.querySelectorAll('.chip').forEach(c => c.classList.toggle('is-active', c.dataset.id === method.id));
buildInputs();
}
function buildChips() {
chipsEl.innerHTML = '';
const list = currentCat === 'get' ? GET_METHODS : SET_METHODS;
list.forEach((m, idx) => {
const chip = document.createElement('button');
chip.className = `chip ${tone()}-tone`;
chip.textContent = m.label;
chip.dataset.id = m.id;
chip.addEventListener('click', () => selectMethod(m));
chipsEl.appendChild(chip);
if (idx === 0) selectMethod(m);
});
}
function selectCat(cat) {
currentCat = cat;
wrapper.querySelectorAll('.tab').forEach(t => t.classList.toggle('is-active', t.dataset.cat === cat));
buildChips();
}
wrapper.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => selectCat(tab.dataset.cat));
});
runBtn.addEventListener('click', () => {
runBtn.className = `run-btn ${tone()}-tone`;
if (currentCat === 'get') {
const result = currentMethod.run();
caption.innerHTML = `<strong>${currentMethod.id}()</strong> returned <strong>${result}</strong>`;
} else {
currentMethod.run(values);
renderCurrent(true);
caption.innerHTML = `<strong>${currentMethod.id}()</strong> updated the date — see the box above`;
}
});
resetBtn.addEventListener('click', () => {
d = INITIAL();
renderCurrent(true);
caption.textContent = 'date reset to Mar 25 2021, 05:30:30';
});
renderCurrent(false);
selectCat('get');
runBtn.className = 'run-btn get-tone';
})();
</script>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});