使用 AJAX 在同一页面中的多个日期选择器

Posted 2023-05-08

【中文标题】使用 AJAX 在同一页面中的多个日期选择器

【英文标题】：Multiple datepicker in same page with AJAX

【发布时间】：2019-02-23 08:43:30

【问题描述】：

我是 JS 的初学者，但我设法粘合了这样的代码。适用于一个输入：

<input type="text" class="form-control" id="1" name="date" placeholder="MM/DD/YYYY" >

		    $('#date').datepicker(
    todayBtn: true,
    daysOfWeekDisabled: "0",
    autoclose: true,
    todayHighlight: true
	
    ); 
	
	$("#date").datepicker( dateFormat: 'dd/mm/yy' )
              .on("changeDate", function(e) 
                  var datetime = $("#date").datepicker("getDate").toISOString();
				  var datetime2 = e.format();
                  $.ajax(
                      type: "POST",
                      url: 'test4.php',
                      data:  
        name : '<?php echo $exvar;?>',
        date2 : datetime2
    ,
              );
);

如何添加更多的输入，大概是这样的：

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

在 JS 中进行哪些更改以使 datepicker 和 AJAX 都能正常工作。如何在 AJAX 中读取变量，特别是 datepicker 读取的变量。非常感谢。西门

【参考方案1】：

您可以使用共享 CSS 类（代码中的“datepick”）将日期选择器和更改事件同时应用于所有文本框。然后在事件处理程序中，您可以使用this 来引用触发事件的特定文本框。

附：据我所知，没有“changeDate”事件（除非您在此代码之外定义了一些自定义事件），并且提供的 e 事件没有 format() 方法。我假设你实际上想要来自 datepicker 的值，所以我在你的 ajax 调用中使用了它。我还将它记录到控制台，因此它在这个演示中可见。你也只需要调用一次“datepicker”函数：

$(function() 
  $('.datepick').datepicker(
    todayBtn: true,
    daysOfWeekDisabled: "0",
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy'
  ).on("change", function(e) 
    var datetime = $(this).datepicker("getDate").toISOString();
    console.log(datetime);
    $.ajax(
      type: "POST",
      url: 'test4.php',
      data: 
        name: '<?php echo $exvar;?>',
        date2: datetime
      ,
    );
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

【讨论】：

@SzymonKowal 没问题。如果答案对您有所帮助，请记住将其标记为“已接受”（单击问题旁边的勾号使其变为绿色）-谢谢。