javascriptdatedate-formattingpikaday

Pikaday JS How to use full day and month names for input format without moment js


I'm using Pikaday.js like so:

new Pikaday({
            field: document.getElementById('top-banner-datepicker'),
            minDate: new Date()

I know that the answer lies in this example from the documentation:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'D/M/YYYY',
    toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
    },
    parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
});

But I can't figure out how to use full day (Monday, Tuesday, Wednesday, etc) and full month names (January, February, etc) instead of the abbreviations (Mon, Tue, Wed... Jan, Feb, Mar... etc)

I don't want to use Moment.JS as it's a giant dependency.

Any help much appreciated!

Thank you

enter image description here


Solution

  • If you wish to format the datepicker field you could use toLocaleString().

    For example if you want to get October instead of Oct:

    date.toLocaleString('default', {
          month: 'long' // use localestring month to get the long month
    });
    

    And if you want to get Sunday instead of Sun:

    date.toLocaleString('default', { // use localestring weekday to get the long day
          weekday: 'long'
    });
    

    Example snippet:

    var picker = new Pikaday({
      field: document.getElementById('datepicker'),
      firstDay: 1,
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
      yearRange: [2000, 2020],
      format: 'D-M-YYYY',
      toString(date, format) {
        console.log(date.toLocaleString('default', {
          weekday: 'short' // use localestring weekday to get the short abbv of day
        }));
        console.log(date.toLocaleString('default', {
          month: 'short' // use localestring weekday to get the short abbv of month
        }));
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = date.getDate();
        const daylong = date.toLocaleString('default', { // use localestring weekday to get the long day
          weekday: 'long'
        });
        const month = date.getMonth() + 1;
        const monthlong = date.toLocaleString('default', {
          month: 'long' // use localestring month to get the long month
        });
        const year = date.getFullYear();
        return `${daylong}, ${monthlong}, ${day} ${year}`; // just format as you wish
      }
    });
    #datepicker {
      width: 200px;
    }
    <link href="https://pikaday.com/css/pikaday.css" rel="stylesheet" />
    <script src="https://pikaday.com/pikaday.js"></script>
    <label for="datepicker">Date:</label>
    <input type="text" id="datepicker">