CODEWITHSUNDEEP
javascriptdatepickerflatpickr
coldfusion
coldfusion

Reputation: 53

Flatpickr mobile format

i am using ember-flatpickr version 2.12.0 and I am facing a formatting issue on mobile devices. I set the property dateFormat to "d.m.Y" which works fine on desktop browsers, but on mobiles formates to "mm/dd/yyyy". Can somebody help me with this? check out the screenshot

Here is repro link, just switch your browser to responsive mode or check it on mobile. Thank you for advices

const fp = flatpickr(".date", {
	dateFormat: 'd.m.Y'
});
article {
  padding: 16px;
  width: 50%
}
<link href="https://npmcdn.com/[email protected]/dist/flatpickr.css" rel="stylesheet"/>
<script src="https://npmcdn.com/[email protected]/dist/flatpickr.js"></script>
<article>
  <input type="text" placeholder="Select Date.." class=date>
</article>

Upvotes: 4

Views: 9363

Answers (2)

premod suraweera
premod suraweera

Reputation: 49

  const flatpickrInstance = flatpickr(checkInDateInput, {
    dateFormat: "Y-m-d",
    minDate: "today",
    defaultDate: checkInDateInput.value || new Date(), 
    disableMobile: true,
    onOpen: function() {
        setTimeout(() => {
            const calendar = document.querySelector('.flatpickr-calendar');
            if (calendar) {
                const iconRect = calendarIcon.getBoundingClientRect();
                calendar.style.position = 'absolute';
                calendar.style.top = `${iconRect.bottom}px`;
                calendar.style.left = `${iconRect.left}px`;
                calendar.style.right = 'auto';
                calendar.style.zIndex = '9999';
            }
        }, 0);
    },
    onClose: function(selectedDates, dateStr) {
       
        checkInDisplay.textContent = dateStr;
    }
});

Upvotes: 0

Lijesh Shakya
Lijesh Shakya

Reputation: 2540

For anyone who are facing the same problem, you can disable the mobile view option.

Add the following option in flatpickr:

{
    disableMobile: "true"
}

For more information, Mobile Support - FlatPickr Documentation

Upvotes: 13

Related Questions