CODEWITHSUNDEEP
javascripthtmldatetimetimedatepicker
Michael
Michael

Reputation: 85

JavaScript Date and Time Picker

I've been searching everywhere but I can't seem to find what I'm looking for. I'm trying to find a basic Date and time picker as well as just a time picker that uses JavaScript.

My page is HTML5 and I know about the input types of datetime-local and time but they don't produce the correct format.

For datetime-local, the date and time is formated as:

yyyy-mm-ddThh:mm

I'm trying to find a way to just have the data saved in the field as mm-dd-yyyy hh:mm am/pm using JavaScript.

The page is simple so the user just fills in the above and then the date and time is stored in an element to be called using document.getElememtById

Same with the time only, looking for just a time JavaScript that uses the 12 hour format and the value is stored in an element called by getElementById.

I found things like libraries which I don't need for this simple page.

Upvotes: 3

Views: 5278

Answers (1)

Momin
Momin

Reputation: 3320

HTML5 introduced a bunch of new types you can use on a traditional input.

Browsers can use these types to show you context-specific keyboards (on touch screen devices), provide native input validation, and, in the case things like dates, surface a native date picker.

<input type="date">

Automatically setting today’s date

To automatically set a [type="date"] input to today’s date with vanilla JS, we’ll use the JavaScript Date() object.

First, we’ll get our field (let’s assume it has an ID of #today) and create a new Date() object.

var field = document.querySelector('#today');
var date = new Date();

The [type="date"] field looks different visually depending on where you live and what browser you’re using (it shows dates in local format norms), but the value follows a YYYY-MM-DD format.

We can get each of those values from our date, convert them to a string with toString(), and concatenate them into a single value.

  • We’ll use getFullYear() to get the year in a four-character format.
  • We’ll use getMonth() to get the month.
  • We’ll use getDate() to get the day.

For some absurd reason, the getMonth() method returns the month as a number starting with 0 (January is 0, February is 1, etc.). We need to add 1 to our result to get the correct month.

Because they’re numbers and not strings, both getMonth() and getDate() are missing leading zeros for single digit months/days. We can use the padStart() method to add those if missing.

Our finished result looks like this.

field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

Let’s do a few things:

Add some helper text to our input label on the proper format that we can hide if the date input type is supported. Add a pattern attribute to validate against for unsupported browsers. Add a placeholder attribute with the pattern as well.

<label for="today">
    The Date
    <span class="description"> Please use the YYYY-MM-DD format</span>
</label>
<input
    id="today"
    type="date"
    pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" placeholder="YYYY-MM-DD"

The JavaScript to set the date won’t change, but we can add some additional code to remove the pattern, placeholder, and helper text if not needed.

// Variables
var field = document.querySelector('#today');
var date = new Date();

// If [type="date"] is supported, update the DOM
if (isDateSupported()) {

    // Remove attributes
    field.removeAttribute('pattern');
    field.removeAttribute('placeholder');

    // Remove the helper text
    var helperText = document.querySelector('[for="today"] .description');
    if (helperText) {
        helperText.parentNode.removeChild(helperText);
    }

}

// Set the value
field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

Here is a working example by Chris Fardinand

Upvotes: 2

Related Questions