使用日期选择器：看似简单的任务

Question

下面是一个作为起点的小提琴示例： http://jsfiddle.net/1ezos4ho/8/

基本上我希望发生以下情况：

1. 选择动态添加为输入值的日期，如下所示

   <input type text value="date selected"....

更新：

<script> 
$(function() { // on load function, everything inside here will not run until the pagehas had time to load 
      $("#dpick").datepicker(); //date picker added here at its state its only able to grab the startDate not the end date not sure why

$('.filter').click(function(){ 

                document.getElementById("results").innerHTML = "<div class='loading-indication'><img src='ajax-loader.gif' /> &nbsp; Please wait... Loading New Courses...</div>";

var datastring = $('#testform').serialize(); // this will create key/value pairs to send to the phph page like `duration5=5` with a `&` separating each key/value pair 
$('#display-datastring').html(datastring); // this line is just so you can see the variable being created 
$.ajax({ 
url: 'fetch_pages.php', 
type: 'post', 
data: datastring, 
success: function(res){ 

$('#results').html(res); 
} 
}); 


}); 

}); 
</script> 

以下是表格：

 <form id="testform"> 

            <input type="text"  placeholder="Start" style="width: 40%;" name="dateStart" class="filter" id="dpick" > 
                            <label id="Paylbl0">To</label>

             <input type="text"  style="width: 40%;" placeholder="End" name="dateEnd" class="filter" id="dpick"> 

问题是函数在我点击输入后立即开始运行，而它只应在选择日期后执行。由于某种原因，日期选择器仅在开始日期而不是结束日期时起作用。

Answer 1

不确定您是否完全理解该插件的工作原理。它会分配该值。这是我向您展示的一个快速“警报”测试。只需选择一个日期。它会监视输入的更改，然后根据VALUE提醒所选日期。

提交您的表单（或通过 js 获取输入值，按照我的示例），它应该可以工作。

http://jsfiddle.net/1ezos4ho/11/

一个 js 示例向您展示...

var i = 3;

$(function() {
    $(".dpick").datepicker();

    $('.dpick').on('change', function() {
        $val = $(this).val();
        alert($val);
    });
});

此外，如果您通过表单提交输入内容，请确保为输入内容命名。根据您的评论，您正在执行一个 POST 请求，该请求正在查找那些尚未识别的项目。

简而言之，

$_POST['endDate']

正在寻找名称为 endDate 的

input

。

<input type="text" name="startDate" placeholder="Start" style="width: 40%;" class="dpick" id="dpick0" >

<input type="text"  name="endDate" style="width: 40%;" placeholder="End" class="dpick" id="dpick1">