JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<p>
    <strong>Open this demo in Chrome</strong>. Type a date value, press the button and check the console in DevTools:    
</p>

<input type="date">
<input type="button" value="Log to console">
    
 <p>
     This demo shows that if you pass the raw string value from a date input field <strong>in Chrome</strong> into the Date constructor, the resulting Date object will be adjusted for your timezone, i.e. the date value won’t be midnight (beginning of day) but e.g. 2 AM for users in central Europe or 5 PM <strong>of the previous day</strong> for users from the US west coast. To get a consistent 0 AM date value, replace the dashes with slashes in the string value before passing it to the Date constructor.
 </p>

CSS

body {
    margin: 2em;
    font-family: sans-serif;
    line-height: 1.8;
}

JavaScript

document.querySelector('input[type="button"]').addEventListener('click', function () {
    var value = document.querySelector('input[type="date"]').value;
    
    console.log('Raw value of date input field: %s', value);
    
    var date1 = new Date(value);
    console.log('Date object from raw value: %s', date1);
    
    var date2 = new Date(value.replace(/-/g, '/'));
    console.log('Date object from value after replacing dashes with slashes: %s', date2);
});