V4 date range picker not honouring date format

Date and time pickers
1

I’m initializing a date range date picker but I can’t get it to honour the date format I’ve specified.

<input type=text class=daterange placeholder='Click to select a date range'>

$('.daterange').mobiscroll().range({
   headerText: 'Select two dates',
   display:'bottom',
   showSelector: false,
   defaultValue: null,
   returnFormat: 'M d, yy',
   buttons:['cancel','set'],
   responsive: {
       small:{
         display: 'center'
       }
   }
});

I’m specifying ‘M d, yy’ as my returnFormat but the dates are coming back in m/d/yy format. I’ve set up a stripped down test file to confirm that there’s nothing else interfering here. You can view it here: https://dev.timesavr.net/test.php

2

Hi @Vincent_Wansink,

The returnFormat option can have 4 possible values: 'jsdate', 'iso8601', 'locale', and 'moment'. You have to use the dateFormat option instead of the returnFormat option, to set the displayed value in the desired format. For example:

dateFormat: 'M d, yy'

3

Thanks Elod, but I was looking for dateFormat and it’s not listed in the options: Calendar > Options - Mobiscroll for JQuery API Documentation

That’s why I thought I had to use returnFormat. Am I looking at the wrong documentation, or is the documentation incomplete? Or a third option, am I going blind?

4

Hi @Vincent_Wansink :wave:

No worries, welcome :wink:

Actually, the dateFormat is listed under the Localization section (Range documentation for JQuery | Mobiscroll) and not under the Options section (the link that you shared).
Probably that was the problem. In either way, happy to hear that helped!

1 Like