代码之家 › 专栏 › 技术社区 › BlueDogRanch

使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

datepicker jquery javascript

BlueDogRanch · 技术社区 · 9 月前

使用jQuery Datepicker,我无法使dateFormat、altFormat和altField正常工作,也无法使用jQuery输出格式化为altFormat的变量 $(this) ?

在下面的示例中,日期选择器的文本输入显示为20241218,而console.log显示为2024年12月26日星期四00:00:00 GMT-0700。我试图在用户每次选择日期时更新变量startDate和endDate,以便在URL查询字符串中使用yymmdd格式的变量。

我知道 datepicker("option", "minDate", startDate) 在第二和第三个函数块中,似乎覆盖了第一个函数中的选项 .datepicker({dateFormat: "MM dd, yy", altFormat: "yymmdd", altField: "#start_date_picker"}) 。但我尝试的方法会抛出Javascript错误。

这种差异似乎与使用有关 $(这个) 在生成变量时 startDate 和 endDate 在第二和第三功能块中。

我如何使用dateFormat、altFormat和altField使其工作?并以yymmdd格式输出startDate和endDate?

https://jsfiddle.net/b302qwhd/

$(function() { 
            $("#start_date_picker")
            .datepicker({dateFormat: "MM dd, yy",
            altFormat: "yymmdd", altField: "#start_date_picker"});
            $("#end_date_picker")
            .datepicker({dateFormat: "MM dd, yy",
            altFormat: "yymmdd", altField: "#end_date_picker"});
            }); 

        $('#start_date_picker').on("change",function(){ 
            startDate = $(this).
            datepicker('getDate'); 
            $("#end_date_picker").
            datepicker("option", "minDate", startDate); 
            console.log(startDate);
        }) 

        $('#end_date_picker').on("change",function(){ 
            endDate = $(this).
            datepicker('getDate'); 
            $("#start_date_picker").
            datepicker("option", "maxDate", endDate); 
            console.log(endDate);

        });

1 回复 | 直到 9 月前

Musa 9 月前

这个 altField 它不应该是另一个日期选择器字段,它只是一个字段,只要在原始日期选择器中以指定的替代格式更新,它就会有值。
因此,您应该有两个额外的字段用作 altFields .

$(function() { 
    $("#start_date_picker").datepicker({dateFormat: "MM dd, yy",
            altFormat: "yymmdd", altField: "#start_alt"});
    $("#end_date_picker").datepicker({dateFormat: "MM dd, yy",
            altFormat: "yymmdd", altField: "#end_alt"});
}); 

$('#start_date_picker').on("change",function(){ 
    var sel = $(this).datepicker('option', 'altField'); 
    startDate = $(sel).val();
    $("#end_date_picker").datepicker("option", "minDate", $(this).datepicker('getDate')); 
    console.log(startDate);
}) 

$('#end_date_picker').on("change",function(){ 
    var sel = $(this).datepicker('option', 'altField'); 
    endDate = $(sel).val();
    $("#start_date_picker").
    datepicker("option", "maxDate", $(this).datepicker('getDate')); 
    console.log(endDate);

})

.ui-datepicker { 
    width: 12em;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>

Start Date: <input type="text" id="start_date_picker">
End Date: <input type="text" id="end_date_picker">

<input type="hidden" id="start_alt">
<input type="hidden" id="end_alt">