Onselect popup event
I am currently working with the Laravel Framework and I am working on a web page that will allow the user to enter a start and end date to search through task lists (by this filter). As long as the user can select from the dropdown if the date is RAIN, ON or AFTER certain date which is selected from the html5 calendar (input type = date). What I am trying to do is now adding an additional parameter for selecting the start / end date of the date to be BETWEEN two dates. So I prefer that they select the "In Between" option, which should start a calendar (or two in fact) when selected, which will allow them to select those two dates and allow me to store those two values.
I am new to Javascript / HTML, so any help would be much appreciated!
Here's what I have so far in my HTML file:
<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>
Note. I have a separate vue / js file that handles mostly a background file.
source to share
You can do something like this -
<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">
In jquery -
$(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();
});
});
Hope this helps you.
source to share