Bootstrap Datepicker с Daterange, не сохраняющим значение как указанный формат - PullRequest
Новая
       22

Bootstrap Datepicker с Daterange, не сохраняющим значение как указанный формат

0 голосов
/ 10 февраля 2020

У меня есть форма бронирования, для которой требуются две даты, поэтому я использую встроенную опцию, которая есть у Bootstrap datepicker (она заключается в вызове функции datepicker для родительского элемента, который содержит входные данные), чтобы показать диапазон дат выбрано, это мой 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>

Это мой Javascript код: 

$(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);

});

}

Дата работает правильно, но я хочу сохранить отформатированную дату внутри скрытой ввод, как вы можете видеть, формат, который я хочу, это: ...format("DD/MM/YY");, но я получаю формат отображения: format("dddd DD [de] MMMM, YYYY"), также я заметил, что значение $(this) в этой строке: $(this).next().val(fecha_formateada); относится к контейнеру div, а не ввод, который изменил значение, так как я могу сохранить нужную дату внутри скрытых вводов?

1 Ответ

1 голос
/ 10 февраля 2020

Я не уверен, в чем ваша проблема, но, глядя на ваш код, я могу только догадываться, что вы можете быть в середине состояния гонки.

Вы устанавливаете переменную date_hidden в Datepicker. toDisplay, а затем чтение из него в пользовательском событии changeDate.

Поместите отладчик или журнал консоли в оба обратных вызова, чтобы убедиться, что вы не находитесь в состоянии гонки.

Как для задания форматированного значения в полях ввода, я могу видеть в вашем HTML коде, что у вас есть селекторы, которые вы можете использовать, например, идентификатор скрытого поля.

Еще одна вещь, которую я бы предложил вместо того, чтобы устанавливать и читать поле date_hidden в этих различных обратных вызовах, просто вызовите $('#elementID').datepicker('getDate') в обработчике события changeDate и выполните все необходимые преобразования там, затем извлеките этот код и поместите его в отдельную функцию.

...