Bootstrap 带有 Daterange 的日期选择器未将值保存为指定格式

Question

我有一个需要两个日期的预订表格，所以我使用 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，而不是已更改值的输入，所以我该如何保存日期正如我想要的隐藏输入？

Answer 1

我不确定你的问题是什么，但通过查看你的代码，我只能猜测你可能处于竞争状态。

您正在 Datepicker.toDisplay 中设置 date_hidden 变量，然后在 changeDate 自定义事件中读取它。

在两个回调中放置调试器或控制台日志，以确保您没有处于竞争状态。

至于在输入字段中设置格式化值，我可以在您的 HTML 代码中看到您可以使用选择器，例如隐藏字段的 ID。

我建议的另一件事是，不要在那些不同的回调中设置和读取 date_hidden 字段，只需在 changeDate 事件处理程序中调用 $('#elementID').datepicker('getDate') 并在那里执行您需要的所有转换，然后提取该代码并将其放入单独的函数中。

Bootstrap 带有 Daterange 的日期选择器未将值保存为指定格式

Bootstrap Datepicker With Daterange Not Saving Value as the Specified Format

html

javascript

bootstrap-datepicker