Clean calendar bootstrap-datetimepicker

0

I have this html code that when choosing a country loads the days in the calendar:

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Pais</label>
            <select class="form-control" id="origen" name="origen" required="">
                <option value="">---</option>
                {% for pais in paises %}
                        <option value="{{ pais.code }}">{{ pais.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label>Fecha Salida</label>
            <input type="text" class="form-control" id="input_from" placeholder="Fecha Salida" required="" disabled="">
            <input type="hidden" id="fechaSalida">
        </div>
    </div>
</div>

When I select a country of origin, I launch an ajax request that initiates the calendar and shows only the available departure dates, more or less like this:

Those that are in bold, are those available.

The problem is that if I change my country, I ALWAYS leave the same dates available. But if I refresh the page ctrl+shif+r and choose the country previously selected if the dates change.

My question is: How can I reset the calendar?

My ajax code, which was inside an on.('change') event:

if (($("#origen").val() != null && !$("#origen").val().equals("") && $("#origen").val() != undefined)
{
    $.ajax({
        method: "GET",
        url: urlInt + "/salidas/" + $("#origen").val() + "/",
    })
    .success(function(msg) {
        //console.log(JSON.parse(msg));

        var disableIni = JSON.parse(msg);
        var disable = [];
        var lastDate = "";

        for (var i = 0; i < disableIni.length; i++)
        {
            var current = '"' + disableIni[i][0] + '/' + disableIni[i][1] + '/' + disableIni[i][2] + '"';
            //console.log(current);
            disable[i] = moment(current, "MM/DD/YYYY");

            lastDate = moment(current, "MM/DD/YYYY")
        }

        var vector = disable;
        var date = new Date();
        date.setDate(date.getDate());

        $("#input_from").prop('disabled', false);
        $('#input_from').datetimepicker({
            locale: 'es',
            format: 'DD-MM-YYYY',
            minDate: date,
            maxDate: lastDate,
            enabledDates: $.each(vector, function(i, value) {
                return value;
            })
        });        
    });
}

The plugin I use is: bootstrap-datetimepicker

    
asked by 05.06.2017 в 08:35
source

1 answer

1

You have to destroy the datetimepicker before creating it again.

Try adding:

$('#input_from').data("DateTimePicker").destroy();

Before

$('#input_from').datetimepicker

You can see the complete documentation here .

If you get an error, check that the element exists before, such as datetimepicker.

    
answered by 05.06.2017 в 11:20