CODEWITHSUNDEEP
javascripthtmlbootstrap-datepicker
Aarón Gutiérrez
Aarón Gutiérrez

Reputation: 1430

Bootstrap Datepicker With Daterange Not Saving Value as the Specified Format

I have a booking form that requires two dates, so I'm using the built in option that Bootstrap datepicker has (it consists on calling the datepicker function on the father element that contains the inputs), to show the daterange selected, this is my HTML:

                  <div class="grupo vip-fechas input-daterange">
                        <div class="barra verde"> <span>¿Cuándo llegas?</span></div>
                        <input type="text" class="input calendario" id="entrada_input" name="entrada_input" placeholder="Selecciona una fecha">
                        <input type="hidden" id="fecha_inicio" name="fecha_inicio">

                        <div class="barra verde"> <span>¿Cuándo te vas?</span></div>
                        <input type="text" class="input calendario" id="salida_input" name="salida_input" placeholder="Selecciona una fecha">
                        <input type="hidden" id="fecha_fin" name="fecha_fin">


                    </div>

This is my Javascript code:

$(document).ready(function(){
   iniciarFechas();
});

function iniciarFechas(){
    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    var date_hidden;


$('.vip-fechas.input-daterange').datepicker({
    weekStart: 1,
    maxViewMode: 1,
    language: "es",
    startDate: today,
    disableTouchKeyboard: true,
    format: {
        toDisplay: function(date, format, language) {
            var fecha = moment(date).add(1,"day");
            date_hidden = fecha;

            return fecha.format("dddd DD [de] MMMM, YYYY");
        },
        toValue: function(date, format, language) {
            var fecha = moment(date).add(1,"day");
            return moment(fecha).format("DD/MM/YY");
            //return moment(date, ["DD.MM.YYYY", "DDMMYYYY"]).toDate();
        }
    },
}).on("changeDate", function(e){

    var fecha_formateada = moment(date_hidden).format("DD/MM/YY");


    $(this).next().val(fecha_formateada);

});

}

The daterange works correctly but I want to store the formatted date inside the hidden inputs, as you can see, the format that I want is this: ...format("DD/MM/YY"); but what I get is the display format: format("dddd DD [de] MMMM, YYYY"), also I noticed that $(this) value within this line: $(this).next().val(fecha_formateada); refers to the container div, and not the input that has changed value, so how can I save the date as I want inside the hidden inputs?

Upvotes: 0

Views: 376

Answers (1)

Jorge Chayan
Jorge Chayan

Reputation: 26

I'm not sure what your problem is but by looking at your code I can only guess that you might be in the middle of a race condition.

You're setting the date_hidden variable in Datepicker.toDisplay and then reading from it in the changeDate custom event.

Put a debugger or a console log in both callbacks to make sure you're not in the middle of a race condition.

As for setting the formatted value in the input fields, well I can see in your HTML code that you have selectors that you can use, like the hidden field's ID for example.

Another thing I'd suggest is, instead of setting and reading the date_hidden field in those different callbacks, just call $('#elementID').datepicker('getDate') in the changeDate event handler and do all the transformations you need there, then extract that code and put it in a separate function.

Upvotes: 1

Related Questions