Clear range picker not working

Date and time pickers
1

Hi,

I am trying to clear the start and end dates of the range datepicker but it will not work.

Init:

	$('#mobileGameHistoryPopupModal .date-picker').mobiscroll().datepicker({
		controls: ['calendar'],
		select:'range',
		touchUi: true,
		themeVariant: 'light',
		theme: 'ios',
		locale: locale,
		dateFormat: 'DD/MM/YYYY',
		//display: 'anchored',
		onClose: function (event, inst) {

			//console.log(event.value[0]); //Start
			//console.log(event.value[1]); //End
			
			let start = new Date(event.value[0]);
			let end = new Date(event.value[1]);

			
			start.setDate(start.getDate());
			MyDateStringStart = start.getFullYear() + '-'
									+ ('0' + (start.getMonth()+1)).slice(-2) + '-'
									+ ('0' + start.getDate()).slice(-2);
													
			end.setDate(end.getDate());
			MyDateStringEnd = end.getFullYear() + '-'
									+ ('0' + (end.getMonth()+1)).slice(-2) + '-'
									+ ('0' + end.getDate()).slice(-2);				
			
		}			
	});

If someone clicks on the reset button (outside of the calendar wrapper):

	$(document).on('click', '#mobileGameHistoryPopupModal .btn-clear', function(e){
		e.preventDefault;

                    //Clear the input field
		$('#mobileGameHistoryPopupModal .date-picker').val('');

                    //Reset the datepicker and clear values
		$('#mobileGameHistoryPopupModal .date-picker').mobiscroll('clear');
	});

The values are still there. So the clear method doesn’t work.

2

Hi @Brecht_S

You can get the datepicker instance using the mobiscroll('getInst') method. Then, in your event handler, use the setVal() method to clear the selected range. Here is a simple code sample:


 var datepickerInst = $("#mobileGameHistoryPopupModal").mobiscroll().datepicker({
        controls: ['calendar'],
        select: 'range',
        touchUi: true,
      }).mobiscroll('getInst');

  $(document).on('click', '.btn-clear', function () {
    datepickerInst.setVal(null)
  });
3

Thanks @Lehel
This is working!