使用jQuery UI Datepicker重定向到URL：根据所选日期更改URL值 [英] Using Jquery UI Datepicker to redirect to URL: Change URL value based on the selected date

问题描述

这是我第一次问StackOverflow问题，所以别问我太多！

我有一个jQuery UI日期选择器字段，我想用它作为基本的‘导航’设备，直接跳转到特定于该日期的WordPress帖子。在近一年的时间里，有368个职位。

我可以成功地使用日期选取器重定向到基于日期字段的URL，例如：

Domain.com/2020-11-07

但是，帖子本身并不使用该URL，它们有一个唯一的编号：

Domain.com/365

有没有办法有条件地改变这一点？我目前正在使用.htaccess重定向解决这个问题，但我想如果可能的话，我应该避免这样做？我宁愿让它从DatePicker脚本直接运行。

一个复杂的问题是，POST URL不是严格连续的；有几个重复的URL，结果类似于036,036B。我猜这排除了以一种聪明的方式来做这件事，这意味着368个条件语句。不过，一旦我知道要做什么，我就可以很容易地创建代码。以下是我目前拥有的基本重定向：

$("#datepicker")
.datepicker({
  dateFormat: "yy-mm-dd",
  onSelect: function(dateText) {
    $(this).change();
  }
})

.change(function() {
  window.location.href = "/" + this.value;
});

感谢您的建议！

非常感谢！

推荐答案

考虑以下示例。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(function() {
  function getDayOfYear(n) {
    var s = new Date(n.getFullYear(), 0, 0);
    var d = (n - s) + ((s.getTimezoneOffset() - n.getTimezoneOffset()) * 60 * 1000);
    var oneDay = 1000 * 60 * 60 * 24;
    var day = "00" + Math.floor(d / oneDay);
    return day.substr(-3);
  }

  var targetUrl;
  var exceptions = {
    "2020-02-06": "036B",
    "2020-10-10": "283B"
  };

  $("#datepicker")
    .datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        var datePicked = $.datepicker.parseDate("yy-mm-dd", dateText);
        var dayPicked = getDayOfYear(datePicked);
        targetUrl = "/" + dayPicked;
        if (exceptions[dateText] != undefined) {
          targetUrl = "/" + exceptions[dateText];
        }
        $(this).change();
      }
    })
    .change(function() {
      alert("Redirect to " + targetUrl);
      //window.location.href = targetUrl;
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

如果用户选择2020-10-09，它们将被重定向/283，因为该日期是一年的第283天。如果他们选择2020-02-02，他们将被重定向至/033。getDayOfYear()将使用填充格式化结果，"001"到"365"并返回一个字符串。

您举了一个例子，艺术家在2020-10-09有一个副本，两幅画，所以如果用户选择2020-10-10，这是一个例外。我创建了一个对象exceptions，将日期文本作为关键字，将值作为所需的特殊结果。

否则，我将创建一个包含该年的所有日期文本和相应ID的对象。选择日期后，您可以直接重定向到该值。

var days = {
  "2020-01-01": "/001",
  "2020-01-02": "/002",
  ...
  "2020-02-06": "/036B",
  ...
  "2020-10-10": "/238B",
  ...
  "2020-12-30": "/365",
  "2020-12-31": "/366",
};

然后类似于：

window.location.href = days[dateText];

这完全取决于所选日期和正确URL之间的逻辑关联。

这篇关于使用jQuery UI Datepicker重定向到URL：根据所选日期更改URL值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！