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

debugcn 发表于 Dev

来源

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

到目前为止我得到了什么：

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

这是日期选择器的代码，当我在日期选择器中按下一个日期时，我会收到一条警告，如下面的评论所述，这也是我希望输入到过滤器框的地方：

$("#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>

如果可以在没有过滤器框的情况下过滤列表也可以。

解块器

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

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

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

var dateFilter = "", dateFilterPlaceholder = "Choose a date";

function clearDateFilter(){
  dateFilter = "";
  $("#dp-button").text(dateFilterPlaceholder);
  $("#mylist").filterable("refresh");
}

function matchOrDate(idx, searchValue){
  var ret = false;
  if(dateFilter !== "") {
    var filtdate = $(this).data("datefilter") || "";
    if ((filtdate != dateFilter)) {
    	ret = true; //filter this one out
    }
  }
  if (searchValue && searchValue.length > 0) {
      searchValue = searchValue.toLowerCase();
      var filttext = $(this).data("filtertext").toLowerCase() || "";
      if (filttext.indexOf(searchValue) < 0) {
          ret = true; //filter this one out
      }      
  }    
  return ret;
}

$(document).on("pagecreate", "#page-one", function() {
  $("#datepicker").datepicker({
    onSelect: function(dateText) {
      var date = $(this).datepicker("getDate");
      var d = date.getDate(), m = date.getMonth() + 1, y = date.getFullYear();
      dateFilter = "" + y + "-" + (m > 9 ? m : "0" + m) + "-" + (d > 9 ? d : "0" + d);
      $("#dp-popup").popup("close");
      $("#dp-button").text(dateText);
      $("#mylist").filterable("refresh");
    }
  });
  $("#mylist").filterable("option", "filterCallback", matchOrDate);
});






/*
 * jQuery Mobile: jQuery UI Datepicker Monkey Patch
 * http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html
 */
(function() {
  // use a jQuery Mobile icon on trigger button
  $.datepicker._triggerClass += " ui-btn ui-btn-right ui-icon-carat-d ui-btn-icon-notext ui-corner-all";
  // replace jQuery UI CSS classes with jQuery Mobile CSS classes in the generated HTML
  $.datepicker._generateHTML_old = $.datepicker._generateHTML;
  $.datepicker._generateHTML = function(inst) {
    return $("<div></div>").html(this._generateHTML_old(inst))
      .find(".ui-datepicker-header").removeClass("ui-widget-header ui-helper-clearfix").addClass("ui-bar-inherit").end()
      .find(".ui-datepicker-prev").addClass("ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext").end()
      .find(".ui-datepicker-next").addClass("ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext").end()
      .find(".ui-icon.ui-icon-circle-triangle-e, .ui-icon.ui-icon-circle-triangle-w").replaceWith(function() {
        return this.childNodes;
      }).end()
      .find("span.ui-state-default").removeClass("ui-state-default").addClass("ui-btn").end()
      .find("a.ui-state-default.ui-state-active").removeClass("ui-state-default ui-state-highlight ui-priority-secondary ui-state-active").addClass("ui-btn ui-btn-active").end()
      .find("a.ui-state-default").removeClass("ui-state-default ui-state-highlight ui-priority-secondary").addClass("ui-btn").end()
      .find(".ui-datepicker-buttonpane").removeClass("ui-widget-content").end()
      .find(".ui-datepicker-current").removeClass("ui-state-default ui-priority-secondary").addClass("ui-btn ui-btn-inline ui-mini").end()
      .find(".ui-datepicker-close").removeClass("ui-state-default ui-priority-primary").addClass("ui-btn ui-btn-inline ui-mini").end()
      .html();
  };
  // replace jQuery UI CSS classes with jQuery Mobile CSS classes on the datepicker div, unbind mouseover and mouseout events on the datepicker div
  $.datepicker._newInst_old = $.datepicker._newInst;
  $.datepicker._newInst = function(target, inline) {
    var inst = this._newInst_old(target, inline);
    if (inst.dpDiv.hasClass("ui-widget")) {
      inst.dpDiv.removeClass("ui-widget ui-widget-content ui-helper-clearfix").addClass(inline ? "ui-content" : "ui-content ui-overlay-shadow ui-body-a").unbind("mouseover mouseout");
    }
    return inst;
  };
})();

/*
 * jQuery Mobile: jQuery UI Datepicker Monkey Patch
 * http://salman-w.blogspot.com/2014/03/jquery-ui-datepicker-for-jquery-mobile.html
 */

.ui-datepicker {
  display: none;
}


/* set height and left/right margin to accomodate prev/next icons */

.ui-datepicker-header {
  position: relative;
  padding: 0.3125em 2.0625em;
  line-height: 1.75em;
  text-align: center;
}

.ui-datepicker-header .ui-btn {
  margin: -1px 0 0 0;
}


/* fixed width layout for calendar; cells are fixed width */

.ui-datepicker-calendar {
  border-collapse: collapse;
  line-height: 2;
}

.ui-datepicker-calendar .ui-btn {
  margin: 0;
  padding: 0;
  width: 2em;
  line-height: inherit;
}

.ui-datepicker-today .ui-btn {
  text-decoration: underline !important;
}

.ui-datepicker-days-cell-over .ui-btn {
  border-color: inherit !important;
}

.ui-datepicker-buttonpane .ui-btn {
  float: left;
  margin: 0.5em 0 0;
  padding: 0.5em 1em;
}

.ui-datepicker-buttonpane .ui-btn:last-child {
  float: right;
}


/* class that can be added to datepicker <input> element's wrapper; makes room for trigger button */

.dp-input-button-wrap {
  position: relative;
  padding-right: 2.5em;
}

.dp-input-button-wrap .ui-btn {
  top: 0.1875em;
  margin: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Filter events</h1>
    </div>
    <div role="main" class="ui-content">
      <div class="ui-grid-a">
          <div class="ui-block-a"><a id="dp-button" href="#dp-popup" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-icon-calendar ui-btn-icon-left ui-mini" data-transition="pop">Choose date</a></div>
          <div class="ui-block-b"><a id="clear-date-button" href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left ui-mini" onclick="clearDateFilter(); return false" rel="external">Clear date filter</a></div>
      </div>
      <ul data-role="listview" data-inset="true" data-filter="true" id="mylist" name="mylist" >
        <li data-filtertext="Surfa på internet Mellangård Markaryd (arrangör)" data-datefilter="2017-03-09">
          <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 data-filtertext="Bingo Stig Inn Strömsnäsbruk (arrangör)" data-datefilter="2017-03-09">
        <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 data-filtertext="Filmafton Mellangård Markaryd (arrangör)" data-datefilter="2017-03-13">
        <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>
    </ul>
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Footer</h1>
    </div>
    <div data-role="popup" id="dp-popup" data-theme="a" class="ui-corner-all">
      <div id="datepicker"></div>
    </div>
  </div>
</body>
</html>

学分：

关于日期选择器：我在我的示例中使用Salman Arshad重新设计的 jQuery UI 日期选择器只是因为我喜欢它，可以随意使用任何你想要的插件，或者自己设计一个自定义的 jQuery-UI 下载，没关系.

从这里开始，多重过滤器是一个伟大的ezanker的想法：具有多个过滤器的JQuery Mobile可过滤列表视图。

请记一边：你应该为元素，列表项等提供您的标记唯一标识符-你需要-你要注意这一点，甚至更多，如果你动态地创建列表项，否则什么也不会工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。