Update Bootstrap datepicker range

0
votes

I made a JS Fiddle : https://jsfiddle.net/12uop4ud/

$(function(){
    var mode_calcul = 0;

    $('#zone_input .input-daterange').datepicker({
        language: "fr",
        format: "yyyy-mm-dd",
        minViewMode: 0,
    });

    $('#minViewMode').on('change',function(){

        mode_calcul = parseInt($(this).val());

        $('#zone_input .input-daterange').datepicker('remove').find('input').val('');
        if(mode_calcul == 0){
            $('#zone_input .input-daterange').datepicker({
                language: "fr",
                format: "yyyy-mm-dd",
                minViewMode: 0
            });     
        }else{
            $('#zone_input .input-daterange').datepicker({
                language: "fr",
                format: "yyyy-mm",
                minViewMode: 1
            });     
        }
    });
});

I have a datepicker range, and a select input. When you change the select input to "Semaine" to "Mois" (Weekly to Monthly), i want to change the "view Mode" of all datepicker.

Let's made a test :

  • In the start datepicker, choose a date.
  • In the end datepicker, choose another date.

At this time, it's OK

  • Change the select input to "Mois" (Monthly)
  • Start and End datepicker were cleared.
  • Click in the start datepicker

At this time, we can see that the datepicker view was changed in "Month view"

  • Pick a date.

At this time, we see a firt issue : Selected date was in the following format "YYYY-MM-DD"... but when the datepicker is closed, date was automatically in the good format YYYY-MM...

If you select "Semaine" (Weekly) in the select input, all fields was cleared

  • Pick a start date.

See that the end datepicker reload a end date, but in the wrong format...

Could you help me ?

Thanks !

1
jquerybootstrap-datepicker

1 Answers

1
votes

You just need to set the options again to null before to set it.

I have added the below function and reset the date before to set again:

function resetDate(inputDate){
    inputDate.datepicker( "option" , {
    minDate: null,
    language: null,
    format: null, 
    minViewMode: null, 
    maxDate: null} );
}

DEMO

I hope it's helps.