Popup onselect Ereignis

Question

Ich arbeite derzeit mit dem Laravel Framework und arbeite an einer Webseite, die es einem Benutzer erlaubt, ein Start- und Enddatum einzugeben, um Listen von Aufgaben (nach diesem Filter) zu durchsuchen. Bisher kann ein Benutzer aus einer Dropdown-Liste entscheiden, ob das Datum BEFORE ist, ON ist oder NACH einem bestimmten Datum, das aus einem HTML5-Kalender ausgewählt wird (Eingabetyp = Datum). Was ich versuche zu tun, ist jetzt eine zusätzliche Option für sie hinzuzufügen, um das Startdatum/Enddatum zwischen zwei Daten zu wählen. Daher möchte ich, dass sie die Option "In between" auswählen, die bei Auswahl einen Kalender (oder zwei tatsächlich) auslösen soll, der es ihnen ermöglicht, diese beiden Daten auszuwählen und es mir zu ermöglichen, diese beiden Werte zu speichern.

Ich bin neu in Javascript/HTML, so würde jede Hilfe sehr geschätzt werden!

Hier ist, was ich bisher in meinem HTML-Datei haben:

<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> 

Anmerkung: Ich habe eine separate Datei js vue/die hauptsächlich Sachen Griffe Back-End.

Answer 1

Sie können etwas tun -

 <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(); 
     }); 
     }); 

hoffen, dass dies hilfreich für Sie.