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

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.

CodePudding user response：

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>