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

Posted 2023-05-08

【中文标题】使用 Jquery UI Datepicker 重定向到 URL：根据所选日期更改 URL 值

【英文标题】：Using Jquery UI Datepicker to redirect to URL: Change URL value based on the selected date

【发布时间】：2021-02-19 22:34:16

【问题描述】：

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

我有一个 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;
);

感谢您的任何建议！

非常感谢！

【问题讨论】：

尚不清楚2020-11-07 与365 的关系。需要有某种逻辑关系。

如果您可以从 WP 查询帖子列表，我假设它们具有唯一 ID 和发布日期，您可以使用 onBeforeShow 执行检查并填充数据。

感谢您的意见。可惜两者没有逻辑关系，只需要对日期进行条件检查，返回对应的URL/slug

为了提供更多背景信息，每篇文章都是一幅画。一年来每天都有一幅画。然而，由于艺术家失去了编号，一些被复制，因此是 350 和 350B。这意味着该项目运行到 368 天，我们也失去了任何正确的顺序。我们记录了任何一天的绘画编号，我只需有条件地将 Datepicker 日期更改为相应的绘画编号。使用 php 我只是使用类似以下的东西：

code 链接 code

【参考方案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 之间的逻辑关联。

【讨论】：

哇！非常感谢您如此彻底地调查。我认为这应该做我需要的。然而，一个额外的复杂情况是，该项目于 2018 年 11 月 18 日开始。我将如何添加该开始日期偏移量？

另外，除了例外，这是否会考虑到额外的“B”日期并从该例外中恢复计数？再次感谢！ @Twisty

如果项目于 2018 年 11 月 18 日开始，您需要将天数抵消该数量。那是 2018 年的第 322 天。所以 322 : 1，所以 01/01/2019 是 1 : 34 和 12/31/2019 大致是 365 : 393。制作 2020 年 11 月 10 日 315 : 708。这是与一些各种例外的关系吗？