Add suffix to date

I have got some javascript code that displays a countdown timer to the next delivery date and it’s working so far but just trying to do two things but am unsure how to do it

  1. I want to add the data suffix to the date so today is 21, I want to add st to it so would be 21st and 22nd for tomorrows date and so on

  2. I want to somehow exclude Christmas dates for example the 24th, 25th and 26th December

Below is the current javascript code I have

(function($) {
  $.fn.countdown = function(options, callback) {
    var settings = $.extend(
      {
        date: null,
        offset: null,
        day: "Day",
        days: "Days",
        hour: "Hour",
        hours: "Hours",
        minute: "Minute",
        minutes: "Minutes",
        second: "Second",
        seconds: "Seconds"
      },
      options
    );

    // Throw error if date is not set
    if (!settings.date) {
      $.error("Date is not defined.");
    }

    // Throw error if date is set incorectly
    if (!Date.parse(settings.date)) {
      $.error(
        "Incorrect date format, it should look like this, 12/24/2012 12:00:00."
      );
    }

    // Save container
    var container = this;

    /**
     * Change client's local date to match offset timezone
     * @return {Object} Fixed Date object.
     */
    var currentDate = function() {
      // get client's current date
      var date = new Date();

      // turn date to utc
      var utc = date.getTime() + date.getTimezoneOffset() * 120000;

      // set new Date object
      var new_date = new Date(utc + 3600000 * settings.offset);

      return new_date;
    };

    /**
     * Main countdown function that calculates everything
     */
    function countdown() {
      var target_date = new Date(settings.date), // set target date
        current_date = currentDate(); // get fixed current date

      // difference of dates
      var difference = target_date - current_date;

      // if difference is negative than it's pass the target date
      if (difference < 0) {
        // stop timer
        clearInterval(interval);

        if (callback && typeof callback === "function") callback();

        return;
      }

      // basic math variables
      var _second = 1000,
        _minute = _second * 60,
        _hour = _minute * 60,
        _day = _hour * 24;

      // calculate dates
      var days = Math.floor(difference / _day),
        hours = Math.floor((difference % _day) / _hour),
        minutes = Math.floor((difference % _hour) / _minute),
        seconds = Math.floor((difference % _minute) / _second);

      // based on the date change the refrence wording
      var text_days = days === 1 ? settings.day : settings.days,
        text_hours = hours === 1 ? settings.hour : settings.hours,
        text_minutes = minutes === 1 ? settings.minute : settings.minutes,
        text_seconds = seconds === 1 ? settings.second : settings.seconds;

      // fix dates so that it will show two digets

      if (days > 0) {
        days = days * 24;
      }

      hours = hours + days;
      minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
      seconds = String(seconds).length >= 2 ? seconds : "0" + seconds;

      // set to DOM
      container.find(".days").text(days);
      container.find(".hours").text(hours);
      container.find(".minutes").text(minutes);
      container.find(".seconds").text(seconds);

      container.find(".days_text").text(text_days);
      container.find(".hours_text").text(text_hours);
      container.find(".minutes_text").text(text_minutes);
      container.find(".seconds_text").text(text_seconds);
    }

    // start
    var interval = setInterval(countdown, 1000);
  };
})(jQuery);

// Customisation

var now = new Date();
var timeCutOff = 16;
var day;
var dayOfTheWeek = now.getDay();
var nextDeliveryDate = new Date();
var deliverBy = new Date();
var deliverTime = 1 // in days

if (
  Date.parse(
    "01/01/2010 " +
      now.getHours() +
      ":" +
      now.getMinutes() +
      ":" +
      now.getSeconds() +
      ""
  ) < Date.parse("01/01/2010 " + timeCutOff + ":00:00")
) {
  // It's before 4PM
  switch (dayOfTheWeek) {
    case 5: // FRIDAY
      nextDeliveryDate.setDate(now.getDate());
      deliverBy.setDate(now.getDate() + 3);
      break;
    case 6: // SATURDAY
      nextDeliveryDate.setDate(now.getDate() + 2);
      deliverBy.setDate(now.getDate() + 3);
      break;
    case 0: // SUNDAY
      nextDeliveryDate.setDate(now.getDate() + 1);
      deliverBy.setDate(now.getDate() + 2);
      break;
    default:
      // MON-THU
      deliverBy.setDate(now.getDate() + 1);
  }
} else {
  // It's after 4PM
  switch (dayOfTheWeek) {
    case 4: // THURSDAY
      nextDeliveryDate.setDate(now.getDate() + 1);
      deliverBy.setDate(now.getDate() + 4);
      break;
    case 5: // FRIDAY
      nextDeliveryDate.setDate(now.getDate() + 3);
      deliverBy.setDate(now.getDate() + 4);
      break;
    case 6: // SATURDAY
      nextDeliveryDate.setDate(now.getDate() + 2);
      deliverBy.setDate(now.getDate() + 3);
      break;
    default:
      nextDeliveryDate.setDate(now.getDate() + 1);
      deliverBy.setDate(now.getDate() + 2);
  }
}

var deliveryCutoff =
  nextDeliveryDate.getMonth() +
  1 +
  "/" +
  nextDeliveryDate.getDate() +
  "/" +
  nextDeliveryDate.getFullYear() +
  " 14:00:00";

console.log('Order by ' + deliveryCutoff.toString());

$("#deliveryCountdownCategoryPage").countdown({
  date: deliveryCutoff,
  offset: 0,
  day: "Day",
  days: "Days"
});
                      
var ndd_date = deliverBy.toLocaleDateString("default", { weekday: "long" });
var ndd_day = deliverBy.getDate();
var ndd_month = deliverBy.toLocaleString("default", { month: "long" });
$(".nextDeliveryDate").text(ndd_date + " " + ndd_day + " " + ndd_month);

This is called an Ordinal number. (because it implies an order. 1st, 2nd, etc.)

Thank you, I’m not great at javascript so unsure how to integrate it into the existing code

I copied the function code in and then added the following line but it is displaying all the javascript function code

$(".nextDeliveryDate").text(ndd_date + " " + ndd_day + " " + getOrdinal + " " + ndd_month);

Or another option

1 Like

This is because you’re passing the getOrdinal function itself instead of its return value.

Ensure you call getOrdinal with the appropriate argument, like so:

$(".nextDeliveryDate").text(ndd_date + " " + ndd_day + " " + getOrdinal(ndd_day) + " " + ndd_month);

Or in modern JavaScript:

$(".nextDeliveryDate").text(`${ndd_date} ${ndd_day} ${getOrdinal(ndd_day)} ${ndd_month}`);

Or as rpg suggests:

const formatter = new Intl.NumberFormat('en-US', { style: 'ordinal' });
$(".nextDeliveryDate").text(`${ndd_date} ${ndd_day} ${formatter.format(ndd_day)} ${ndd_month}`);
1 Like

Thank you, it’s working now. Thank you for all the replies and help, appreciate it

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.