按下时填充列表中jquery筛选器字段的日期选择器_Jquery_Jquery Mobile_Jquery Ui Datepicker

按下时填充列表中jquery筛选器字段的日期选择器

jquery jquery-mobile

按下时填充列表中jquery筛选器字段的日期选择器,jquery,jquery-mobile,jquery-ui-datepicker,Jquery,Jquery Mobile,Jquery Ui Datepicker,正如标题所说，我需要从日期选择器获取日期以筛选事件列表的帮助到目前为止，我得到的是：我有一个日期选择器和事件列表。当我按下日期时，我想用日期选择器中选择的日期筛选列表。但是，我找不到正确的方法来调用列表的筛选器字段，因此我可以完成此操作这是日期选择器的代码，当我在日期选择器中按下日期时，我会收到一个警报，如下面的注释所示，这也是我希望在筛选框中输入内容的地方： $("#datepick").datepicker({ beforeShowDay: function(date) { /

正如标题所说，我需要从日期选择器获取日期以筛选事件列表的帮助

到目前为止，我得到的是：

我有一个日期选择器和事件列表。当我按下日期时，我想用日期选择器中选择的日期筛选列表。但是，我找不到正确的方法来调用列表的筛选器字段，因此我可以完成此操作

这是日期选择器的代码，当我在日期选择器中按下日期时，我会收到一个警报，如下面的注释所示，这也是我希望在筛选框中输入内容的地方：

$("#datepick").datepicker({
beforeShowDay: function(date) {
    //This only marks the dates where there are events.
    var result = [true, '', null];
    var matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
    });

    if (matching.length) {
        result = [true, 'highlight', null];
    }
    return result;
},
onSelect: function(dateText) {
    //This is what happens when you click a date.
    var date,
        selectedDate = new Date(dateText),
        i = 0,
        event = null;
    //An alert just to make sure it works up to this point. Here the list should be filtered.
    alert(selectedDate);    

}

})

然后我们有了如下的html：

<form action="#" method="get">
        <div data-role="fieldcontain">
            <div name="datepick" id="datepick"></div>
            <br />
        </div>      
    </form>

    <ul data-role="listview" data-filter="true" id="mylist" name="mylist" >

            <li name="search" id="search" data-filtertext="Surfa på internet Mellangård Markaryd 2017-03-09 (arrangör)"><a href="addaktivitet.asp?id=2244" data-ajax="false">
            <h3>Surfa på internet</h3>
            <p><strong>Ort: Markaryd</strong></p>
            <p>Arrangör: 1</p>
            <p class="ui-li-aside"><strong>Datum: 2017-03-09
                                    <br />Tider: 13.30 - 16.00 </strong></p>
        </a></li>

            <li name="search" id="search" data-filtertext="Bingo Stig Inn Strömsnäsbruk 2017-03-09 (arrangör)"><a href="addaktivitet.asp?id=2252" data-ajax="false">
            <h3>Bingo</h3>
            <p><strong>Ort: Strömsnäsbruk</strong></p>
            <p>Arrangör: 1</p>
            <p class="ui-li-aside"><strong>Datum: 2017-03-09
                                    <br />Tider: 13.30 - 16.00 </strong></p>
        </a></li>

            <li name="search" id="search" data-filtertext="Filmafton Mellangård Markaryd 2017-03-13 (arrangör)"><a href="addaktivitet.asp?id=2245" data-ajax="false">
            <h3>Filmafton</h3>
            <p><strong>Ort: Markaryd</strong></p>
            <p>Arrangör: 1</p>
            <p class="ui-li-aside"><strong>Datum: 2017-03-13
                                    <br />Tider: 16.00 - 19.30 </strong></p>
        </a></li><!-- and so on...--></ul>

如果可以在不使用筛选框的情况下筛选列表，也可以。

我建议您将两个筛选器分开，这样您就可以同时按日期和自由文本进行筛选

这种方法的一个优点是，您可以将本地化的日期可视化与用于在数据库中存储信息的标准日期格式分开

在我下面的建议中，为了实现这样一个多过滤器，我定义了一个自定义数据属性，该属性只包含事件的日期-然而，这不是严格必要的-最后，我将在filterable小部件的过滤器回调中结合这两个搜索条件：