彈出ONSELECT事件

我目前與Laravel框架的工作和我的工作在網頁上，這將允許用戶爲了通過任務列表來搜索（通過過濾器）輸入開始日期和結束日期。到目前爲止，用戶可以從下拉列表中決定日期是BEFORE，ON還是在從html5日曆（input type = date）中選擇的特定日期之後。我想要做的是現在添加一個額外的選項，讓他們選擇開始日期/結束日期在兩個日期之間。所以我最好希望他們選擇'中間'選項，當選中這個選項時應該觸發一個日曆（或者實際上是兩個），以便他們選擇這兩個日期並允許我存儲這兩個值。彈出ONSELECT事件

我是新來的JavaScript/HTML所以任何幫助將非常感謝！

這裏是我迄今爲止在我的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文件，處理主要是後端的東西。

來源

2017-06-15 Y. Ben

是否使用你現在有日曆選項卡？因爲引導日期選擇器庫爲您處理所有這些情況。它也很容易使用。看看：https：//bootstrap-datepicker.readthedocs.io/en/latest/ – btl

哦，我明白這個鏈接謝謝你。我只是無法弄清楚如何獲得一個onselect事件（如果選擇'In between'選項）來提示打開一個日曆。所以在html中使用type = date對我來說很好;我只是不知道如何讓實際的選項提示打開...... –

@ Y.Ben記住填充工具，如果你不使用已經做了包 - http://caniuse.com/#feat=input-約會時間 – Ian

你可以做這樣的事情 -

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

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

希望這能對你有幫助。

來源

2017-09-05 16:01:06

彈出ONSELECT事件

回答

相關問題