Switching from V4 to V5 datepicker issues

[Vincent_Wansink]

So this is how I’m using my datepicker which has always worked with V4.

  $('.datepicker').mobiscroll5().datepicker({
   display:'bottom',
   dateFormat: js_dateformat,
   buttons:['clear'],
   setOnDayTap:true,
   responsive: {
       small:{
         display: 'center'
       }
   },
   onClear: function(event,inst){
     inst.hide();
   }
  });

But now that I’m using V5 some of these options are not working. For example, dateFormat. Did you guys remove the dateFormat option? Or is there a different way to specify a date format now?

Also there no longer seems to be a predefined “Clear” button, nor an onClear event.

And I don’t see a “setOnDayTap” option anymore, but I’m assuming this is enabled by default.

And lastly the styling is a bit messed up, on desktop especially. It’s almost like it’s confused between light and ark theme because the space outside of the calendar itself is black, but each day in the calendar has a light grey background as well as white text, making it difficult to read.

On mobile it’s better although I still think there might be something wrong with the styling as the header and footer of the calendar have white backgrounds while the calendar itself has a light grey background.

I should point out I’m using both V4 and V5 in my project, and this is how I’m including them.

  <!-- Mobiscroll -->
  <script src="plugins/mobiscroll5/js/mobiscroll.jquery.min.js"></script>
  <script>
    // Save mobiscroll 5 object before loading v4
    window.mobiscroll5 = mobiscroll;
    $.fn.mobiscroll5 = $.fn.mobiscroll;
  </script>
  <script src="plugins/mobiscroll/js/mobiscroll.jquery.min.js"></script>

  <link href="plugins/mobiscroll5/css/mobiscroll.jquery.min.css" rel="stylesheet">
  <link href="plugins/mobiscroll/css/mobiscroll.jquery.min.css" rel="stylesheet">

[isti]

Hi Vincent, yes, there are a few breaking changes between v4 and v5

1 - dateFormat: the syntax of the date and time format has changed, see the docs for the new formatting options.

2 - There’s no clear button and onClear event. Use a custom button instead. However getting the instance here will be a little trickier, if you init multiple pickers at once, as the button handler function will not receive it (see code below).

3 - setOnDayTap is now enabled by default if there’s no time picker and no Set button

$('.datepicker').each(function () {
  var inst = $(this).mobiscroll5().datepicker({
    display:'bottom',
    dateFormat: js_dateformat,
    buttons: [{
      text: 'Clear',
      handler: function () {
        inst.setVal(null);
        inst.close();
      }
    }],
    responsive: {
      small: {
        display: 'center'
      }
    },
  }).mobiscroll5('getInst');
});

4 - Styling: you have some custom styling in your css which messes up the calendar picker:

.mbsc-calendar-table,
.mbsc-calendar-week-days {
    background: #f7f7f7;
}

Please remove it, or, if it’s for the eventcalendar (which uses the same calendar view as the picker), add an extra class to make sure only the eventcalendar is styled:

.mbsc-eventcalendar .mbsc-calendar-table,
.mbsc-eventcalendar .mbsc-calendar-week-days {
    background: #f7f7f7;
}

[Vincent_Wansink]

Thank you isti. It was my own css messing up the styling, however now that that’s fixed I can’t seem to get the calendar to render in a light theme on Windows. On Android and ios it seems to work fine, but on Windows I get the black calendar even if I specify themeVariant:‘auto’ or themeVariant:‘light’. Is this a bug?

I did have my windows settings set to dark theme initially, so that was to be expected when I wasn’t specifying a themeVariant but when I tried to force the themeVariant to light I noticed that it made no difference. So I changed my windows theme to light to see if it was still auto detecting my OS theme, but even after I changed my windows theme to light I still can’t get the calendar to display in a light theme. Thoughts?

[Vincent_Wansink]

I noticed also that the V5 date picker triggers an onchange event when it’s initialized. This is problematic because in one case I want to reload the page when the date is changed, but if simply initializing the date picker triggers an onchange event, which reloads the page again, I end up in an endless loop of page loads.

How do I prevent the onchange from firing on initialize?