使用日期选择器:简单的任务

Working with date picker: simple task

本文关键字：简单 任务 选择器 日期      更新时间：2023-09-26

下面是一个fiddle示例作为起点：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 `&` sepparating 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">

问题是，当我点击输入时，函数就开始运行，而只有在选择日期后才能执行。由于某些原因，日期选择器只在开始日期而不在结束日期时才起作用。

不确定您是否完全理解插件的工作原理。它会指定值。这是我给你看的一个快速"警报"测试。只需选择一个日期。它会监视输入的更改，然后根据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">

相关文章：