Using Jquery UI Datepicker to redirect to URL: Change URL value based on the selected date

Question

This my first ever StackOverflow questions so go easy on me!

I have a jQuery UI Datepicker field that I want to use as a basic 'navigation' device to jump straight to a Wordpress Post specific to that date. There are 368 posts over an almost one year period.

I can succesfully use the datepicker to redirect to a url that is based around the date field, e.g:

domain.com/2020-11-07

however, the posts themselves don't use that URL, they have a unique number:

domain.com/365

Is there a way to conditionally change that? I'm currently working around this using .htaccess redirects, but I guess I should avoid that if possible? I'd rather get it working directs from the datepicker script.

One complication, is that the post URLs are not strictly sequential; there are a few duplicates resulting in some like 036, 036B. I'm guessing that rules out doing this in a clever way and means 368 conditional statements. I can create the code easily enough though, once I know what to do. Here's what I currently have for the basic redirect:

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

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

Any advice gratefully recieved!

Many thanks!

Answer 1

Consider the following example.

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

If the User selects 2020-10-09, they will be redirected /283 as that date is the 283rd day of the Year. If they select 2020-02-02, they will be redirected to /033. The getDayOfYear() will format the result with padding, "001" to "365" and return a String.

You gave an example that the artist had a duplicate on 2020-10-09, two paintings, so if the user selects 2020-10-10, this is an exception. I created an Object exceptions with the Date Text as a Key and the value as the desired special result.

Otherwise I would create an Object with all the Date Text of the year and the corresponding IDs. When a date is picked, you can then just redirect to that value.

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",
};

Then something like:

window.location.href = days[dateText];

This all depends on the logical correlation between the date selected and the correct URL.