弹出选择事件答案

【问题标题】：Popup onselect event弹出选择事件
【发布时间】：2017-06-15 14:44:12
【问题描述】：

我目前正在使用 Laravel 框架，并且正在开发一个网页，该网页允许用户输入开始和结束日期，以便搜索任务列表（通过该过滤器）。到目前为止，用户可以从下拉列表中决定日期是在从 html5 日历中选择的某个日期之前、开启还是之后（输入类型 = 日期）。我现在要做的是为他们添加一个附加选项，以选择开始日期/结束日期在两个日期之间。所以我最好希望它们选择“in”选项，这应该在选择时触发日历（或两个实际），这将允许它们选择这两个日期并允许我存储这两个值。

我是 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 文件，主要处理后端的东西。

【问题讨论】：

您是否还在使用现有的日历选项？因为引导日期选择器库会为您处理所有这些情况。它也很容易使用。看看：bootstrap-datepicker.readthedocs.io/en/latest
哦，我很感激那个链接，谢谢。我只是无法弄清楚如何获取 onselect 事件（如果选择了“介于两者之间”选项）来提示打开日历。所以在 html 中使用 type = date 对我来说很好；我只是不知道如何获得提示打开的实际选项...
@Y.Ben 如果你不使用已经使用的包，请记住 polyfill - caniuse.com/#feat=input-datetime

标签： javascript html laravel vue.js

【解决方案1】：

你可以这样做 -

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

希望这对你有帮助。

【讨论】：