Javascript 选择事件弹出窗口
我目前正在使用Laravel框架,我正在制作一个网页,允许用户输入开始和结束日期,以便搜索任务列表(通过该过滤器)。到目前为止,用户可以从下拉列表中决定日期是在从html5日历中选择的某个日期之前、之上还是之后(输入类型=日期)。我现在要做的是为他们添加一个附加选项,以选择介于两个日期之间的开始日期/结束日期。因此,我希望他们选择“中间”选项,当选择该选项时,将触发一个日历(实际上是两个日历),允许他们选择这两个日期,并允许我存储这两个值 我是Javascript/HTML新手,因此非常感谢您的帮助 以下是我目前在HTML文件中的内容:Javascript 选择事件弹出窗口,javascript,html,laravel,vue.js,Javascript,Html,Laravel,Vue.js,我目前正在使用Laravel框架,我正在制作一个网页,允许用户输入开始和结束日期,以便搜索任务列表(通过该过滤器)。到目前为止,用户可以从下拉列表中决定日期是在从html5日历中选择的某个日期之前、之上还是之后(输入类型=日期)。我现在要做的是为他们添加一个附加选项,以选择介于两个日期之间的开始日期/结束日期。因此,我希望他们选择“中间”选项,当选择该选项时,将触发一个日历(实际上是两个日历),允许他们选择这两个日期,并允许我存储这两个值 我是Javascript/HTML新手,因此非常感谢您的
<h6 style="float:left">Filter By Date:</h6>
<div style="float:left;clear:left;">
<label for="start">Start Date </label>
<select name="start_op" v-model="filter.start_option" @change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start" v-model="filter.start" @change="getVueTasks(pagination.current_page)">
</div>
<div style="float:left">
<label for="end">End Date </label>
<select name="end_op" v-model="filter.end_option" @change="getVueTasks(pagination.current_page)"> <!--As soon as they select a department, call getVueTasks to filter what tasks are displayed-->
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="end" v-model="filter.end" @change="getVueTasks(pagination.current_page)">
</div>
按日期筛选:
开始日期
在之前
正在播放
追求
介于
结束日期
在之前
正在播放
追求
介于
注意:我有一个单独的vue/js文件,主要处理后端内容。您可以这样做-
<select name="start_op" id="start_op">
<option value="lt">Is Before</option>
<option value="eq" selected>Is On</option>
<option value="gt">Is After</option>
<option value="bt">Is Between</option>
</select>
<br/>
<input type="date" id="start">
希望这会对您有所帮助。您现在使用的日历选项有问题吗?因为bootstrap datepicker库为您处理所有这些情况。它也很容易使用。看一看:哦,我很感谢你的链接,谢谢。我只是不知道如何获取onselect事件(如果选择了“中间”选项)来提示打开日历。因此,在html中使用type=date对我来说很好;我只是不知道如何获得实际选项来提示打开…。@Y.Ben如果您不使用已经使用的软件包,请记住polyfill-
$(function() {
$("#start_op").on("change",function() {
var st_date= this.value;
if (st_date=="") return; // please select - possibly you want something else here
$('#start').click();
});
});