使用 Jquery UI Datepicker 重定向到 URL：根据所选日期更改 URL 值

Question

这是我的第一个 StackOverflow 问题，所以请放轻松！

我有一个 jQuery UI Datepicker 字段，我想将其用作基本的“导航”设备，以直接跳转到特定于该日期的 Wordpress 帖子。在将近一年的时间里，共有 368 个帖子。

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

domain.com/2020-11-07

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

domain.com/365

有没有办法有条件地改变它？我目前正在使用 .htaccess 重定向来解决这个问题，但我想如果可能的话我应该避免这种情况？我宁愿让它从 datepicker 脚本直接工作。

一个复杂的问题是帖子 URL 不是严格按顺序排列的；有一些重复导致一些像 036、036B。我猜这排除了以一种聪明的方式执行此操作，并且意味着 368 个条件语句。不过，一旦我知道该怎么做，我就可以很容易地创建代码。这是我目前的基本重定向：

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

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

感谢您的任何建议！

非常感谢！

Answer 1

考虑以下示例。

$(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 月 9 日复制了两幅画，所以如果用户选择 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 之间的逻辑关联。