AJAX 同一页面中的多个日期选择器
Multiple datepicker in same page with AJAX
我是 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 中更改哪些内容才能使日期选择器和 AJAX 正常工作。如何读取 AJAX 中的变量,特别是日期选择器读取的变量。非常感谢。西蒙
您可以使用共享 CSS class(代码中的 "datepick")将日期选择器和更改事件同时应用于所有文本框。然后在事件处理程序中,您可以使用 this
来引用触发事件的特定文本框。
P.S。据我所知,没有 "changeDate" 事件(除非您在此代码之外定义了一些自定义事件),并且提供的 e
事件没有 format() 方法。我假设您实际上想要日期选择器的值,所以我在您的 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" />
我是 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 中更改哪些内容才能使日期选择器和 AJAX 正常工作。如何读取 AJAX 中的变量,特别是日期选择器读取的变量。非常感谢。西蒙
您可以使用共享 CSS class(代码中的 "datepick")将日期选择器和更改事件同时应用于所有文本框。然后在事件处理程序中,您可以使用 this
来引用触发事件的特定文本框。
P.S。据我所知,没有 "changeDate" 事件(除非您在此代码之外定义了一些自定义事件),并且提供的 e
事件没有 format() 方法。我假设您实际上想要日期选择器的值,所以我在您的 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" />