时间戳

首页 > 解决方案 > 具有日期范围的引导日期选择器未将值保存为指定格式

javascript - 具有日期范围的引导日期选择器未将值保存为指定格式

问题描述

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

标签： javascripthtmlbootstrap-datepicker

解决方案

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

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

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

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

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

推荐阅读