Reload range calendar without reloading the page

Date and time pickers
1

Hello,

I have created a range calendar where I have entered some invalid dates. On the page, the invalid dates can be changed with jquery. So without reloading the page I update the invalid setting as required, but it does not seem to take. I have also used the methods redraw and refresh, and still it seems the original invalid is still in place. Possible to reset it without reloading the page?

2

Hello @Seyi_Awofadeju :wave:

Do you want to refresh the range calendar yourself together with invalid options or just the invalid options?

3

I just need the new invalid options to take effect. I change them through javascript, but the invalid dates entered on page load still seem to be in effect.

4

In this case you need to use a code like this:

$('#demo').mobiscroll().range({
    invalid: [
        new Date(2020, 8, 18),
        new Date(2020, 8, 22),
    ],
    buttons: ['set', {
        text: 'test',
        handler: function (event, inst) {
            inst.settings.invalid = [
                new Date(2020, 8, 20),
                new Date(2020, 8, 24),
                new Date(2020, 8, 26),
            ]
            inst.refresh();
        }
    }, ]
});

Let me know if this helps!

5

Unfortunately it is not working properly for me. With the range calendar I have Sept 18 - 22 invalidated. I open the range calendar, click the button ‘test’, which should clear out all invalid dates. It shows visually that they are not invalid anymore. But then I now try to select the date range Sept 16 - 20 and it does not let me. Here is my full code:

<div class="demo-container">
    <label for="demo-non-form">Range</label>
    <input id="demo-non-form" class="demo-non-form" placeholder="Please Select..." />
</div>
<script>
mobiscroll.settings = {
    theme: 'ios',
    themeVariant: 'light'
};
jQuery(function () {
    jQuery('#demo-non-form').mobiscroll().range({
        showSelector: false,
		invalid: [
			new Date(2020, 8, 18),
			new Date(2020, 8, 19),
			new Date(2020, 8, 20),
			new Date(2020, 8, 21),
			new Date(2020, 8, 22),
		],
		buttons: ['set', {
			text: 'test',
			handler: function (event, inst) {
				inst.settings.invalid = []
				inst.refresh();
			}
		} ]
    });

});
</script>
6

I tried your code and I have the same problem. In this case, the solution is to use the option method:

$('#demo-non-form').mobiscroll().range({
    showSelector: false,
	invalid: [
		new Date(2020, 8, 18),
		new Date(2020, 8, 19),
		new Date(2020, 8, 20),
		new Date(2020, 8, 21),
		new Date(2020, 8, 22),
	],
	buttons: ['set', {
		text: 'test',
		handler: function (event, inst) {
			inst.option({
                invalid: []
            });
		}
	} ]
});
7

Perfect, thanks. Works like a charm.