Search code examples
javascriptjquerydaterangepicker

How clear/reset the DateRangePicker calendar?


I have JQuery plugin DateRangePicker calendar and reset button. How i can clear/reset selected dates in DateRangePicker calendar?

/* Calendar init */ 
$('.calendar__input').daterangepicker({
        alwaysShowCalendars: true, 
        linkedCalendars: false, 
        showDropdowns: true, 
        autoApply: true, 
        parentEl: $('.calendar__body'), 
        minDate: new Date(), 
        maxYear: parseInt(moment().add(5, "years").format('YYYY')), 
        locale: {
            firstDay: 1,
            format: 'DD.MM.YYYY',
            daysOfWeek: [
                "Вс",
                "Пн",
                "Вт",
                "Ср",
                "Чт",
                "Пт",
                "Сб"
            ],
            monthNames: [
                "Январь",
                "Февраль",
                "Март",
                "Апрель",
                "Май",
                "Июнь",
                "Июль",
                "Август",
                "Сентябрь",
                "Октябрь",
                "Ноябрь",
                "Декабрь"
            ],
        }
    });
    
    /* Reset Calendar */
    $('.reset').click(function () { 
        $('.calendar__input').val('');
    });

CodePen: https://codepen.io/maxbeat/pen/WNzgaMJ


Solution

  • set global var var today = new Date();

    in the reset button put:

    $('.calendar__input')
      .data('daterangepicker')
      .setStartDate(today);
    $('.calendar__input')
      .data('daterangepicker')
      .setEndDate(today);
    $('.calendar__input')
      .data('daterangepicker')
      .updateCalendars();
    

    This will set the new dates but you will need to updateCalendars after that.