javascriptjquerydate-formattingflatpickr

how to remove 0 before single number date in js flatpickr?


The js code given below:

var endDatePicker = flatpickr("#end-date-picker", {
  enableTime: false,
  singleDate: true,
  selectForward: false,
  dateFormat: "M d, Y",
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById("end-str-date").innerHTML = dateStr;
  }
});

// Set calendar for table field
  
var StartDatePicker = flatpickr("#beg-date-picker", {
  enableTime: false,
  singleDate: true,
  selectForward: false,
  dateFormat: "m/d/Y",
  year: "numeric",
  month: "1-digit",
  day: "1-digit",
  onChange: function(selectedDates, dateStr, instance) {
    document.getElementById("beg-str-date").innerHTML = dateStr;
  }
});

enter image description here

I want to do this format without 0 before single number day/month date.

enter image description here

But it show like that, with zero.


Solution

  • Just change the format from m/d/Y to n/j/Y.

    You can read more about it in the official documentation, but I'll post it here as well:

    Character Description Example
    d Day of the month, 2 digits with leading zeros 01 to 31
    D A textual representation of a day Mon through Sun
    l (lowercase 'L') A full textual representation of the day of the week Sunday through Saturday
    j Day of the month without leading zeros 1 to 31
    J Day of the month without leading zeros and ordinal suffix 1st, 2nd, to 31st
    w Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday)
    W Numeric representation of the week 0 (first week of the year) through 52 (last week of the year)
    F A full textual representation of a month January through December
    m Numeric representation of a month, with leading zero 01 through 12
    n Numeric representation of a month, without leading zeros 1 through 12
    M A short textual representation of a month Jan through Dec
    U The number of seconds since the Unix Epoch 1413704993
    y A two digit representation of a year 99 or 03
    Y A full numeric representation of a year, 4 digits 1999 or 2003
    Z ISO Date format 2017-03-04T01:23:43.000Z

    Check the working example, as well.

    var endDatePicker = flatpickr("#end-date-picker", {
      enableTime: false,
      singleDate: true,
      selectForward: false,
      dateFormat: "M d, Y",
      onChange: function(selectedDates, dateStr, instance) {
        document.getElementById("end-str-date").innerHTML = dateStr;
      }
    });
    
    // Set calendar for table field
      
    var StartDatePicker = flatpickr("#beg-date-picker", {
      enableTime: false,
      singleDate: true,
      selectForward: false,
      dateFormat: "j/n/Y",
      year: "numeric",
      month: "1-digit",
      day: "1-digit",
      onChange: function(selectedDates, dateStr, instance) {
        document.getElementById("beg-str-date").innerHTML = dateStr;
      }
    });
    <head>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
            <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
            <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
        <script src="https://npmcdn.com/flatpickr/dist/l10n/ru.js"></script>
    </head>
    <body>
    
    <div id="datepicker">
      <input type="text" id="end-date-picker">
        <input type="text" id="beg-date-picker">
    </div>
    <span id="end-str-date"></span>
    <br>
    <span id="beg-str-date"></span>
    </body>