JavaScript новый Дата Порядковый (st, nd, rd, th)

Если это вообще возможно, без библиотек JavaScript или большого количества неуклюжего кода, я ищу самый простой способ форматирования даты через две недели в следующем формате:

13th March 2013

Код, который я использую:

var newdate = new Date(+new Date + 12096e5);
document.body.innerHTML = newdate;

который возвращает дату и время через две недели, но примерно так: ср 27 мар 2013 21:50:29 GMT+0000 (стандартное время GMT)

Вот код в jsFiddle.

Любая помощь будет оценена!

23 ответа

Вот:

JSFiddle

var fortnightAway = new Date(+new Date + 12096e5),
  date = fortnightAway.getDate(),
  month = ["January","February","March","April","May","June","July",
           "August","September","October","November","December"][fortnightAway.getMonth()];

function nth(d) {
  if (d > 3 && d < 21) return 'th'; 
  switch (d % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
}
document.body.innerHTML = date + nth(date) + " " +
  month + " " + 
  fortnightAway.getFullYear();

Вот один вкладыш, вдохновленный другими ответами. Это проверено и будет принимать 0 и отрицательные числа.

function getOrdinalNum(n) {
  return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
}

Я делал это и для дат, но поскольку день месяца может быть только между 1 и 31, я получил упрощенное решение.

function dateOrdinal(dom) {
    if (dom == 31 || dom == 21 || dom == 1) return dom + "st";
    else if (dom == 22 || dom == 2) return dom + "nd";
    else if (dom == 23 || dom == 3) return dom + "rd";
    else return dom + "th";
};

или компактная версия с использованием условных операторов

function dateOrdinal(d) {
    return d+(31==d||21==d||1==d?"st":22==d||2==d?"nd":23==d||3==d?"rd":"th")
};

http://jsben.ch/

Если вы поклонник moment.js, то можете сделать это с помощью format("Do")

Примеры

var newdate = new Date();
moment(newdate).format("Do MMMM YYYY")
//Returns 1st January 2020

moment("01/01/2020", "MM/DD/YYYY").format("Do")
//Returns 1st

moment("01/01/2020", "MM/DD/YYYY").format("Do MMM YYYY")
//Returns 1st Jan 2020

Здесь уже есть много хороших ответов, хотя тот, который использует , который стандартизирует классификацию порядковых по Intl.PluralRulesязыкамномеров , все еще может быть полезен.

Ниже приведены некоторые реализации для en-GB.

jsfiddle

  • один лайнер:

            console.log({one:'st',two:'nd',few:'rd',other:'th'}[new Intl.PluralRules('en-GB', { type: 'ordinal' }).select(new Date().getDate())])
    
  • подробный пример:

            const suffixMap = {
      one: 'st',
      two: 'nd',
      few: 'rd',
      other: 'th',
    };
    const locale = 'en-GB';
    const moment = new Date();
    const dayOfMonth = moment.getDate();
    const pluralRuleOptions = {
      type: 'ordinal',
    };
    const pluralRule = new Intl.PluralRules(locale, pluralRuleOptions);
    const ordinal = pluralRule.select(dayOfMonth);
    console.log(suffixMap[ordinal])
    

Вот простая функция, которая работает с любым числом:

      function getOrdinal(n){
    ord = [,'st','nd','rd'];
    exceptions = [11,12,13];
    nth = ((ord[n%100] == undefined) || (exceptions.includes(n%100)))) ? 'th' : ord[n%100];
    return n + nth;
}

Он может принимать число или число в виде строки. Например:

      getOrdinal(28)        //Outputs: 28th
getOrdinal('108')     //Outputs: 108th

Еще одно решение в море решений.

let suffix = (day >= 4 &&  day <= 20) || (day >= 24 && day <= 30)
    ? "th"
    : ["st", "nd", "rd"][day % 10 - 1];

Если вы поклонник dayjs, который сейчас предпочтительнее, чем moment, вот пример:

ты можешь просто сделать dayjs(date).format('Do')но я включил пример, чтобы показать, как вы можете использовать его с любым форматом, который вы хотите.

Обратите внимание, что порядковый номер даты доступен в расширенных форматах Dayjs.

      var advancedFormat = require('dayjs/plugin/advancedFormat')
dayjs.extend(advancedFormat)

// date variable - your date to format eg:- 2022-04-01T21:27:00
dayjs(date).format('dddd, MMMM Do [at] h:mma')

Вывод для приведенного выше примера (2022-04-01T21:27:00):

Много форматирования ответов, так что я просто поработаю над n-м целым числом

Number.prototype.nth= function(){
    if(this%1) return this;
    var s= this%100;
    if(s>3 && s<21) return this+'th';
    switch(s%10){
        case 1: return this+'st';
        case 2: return this+'nd';
        case 3: return this+'rd';
        default: return this+'th';
    }
}

Много ответов, вот еще:

function addOrd(n) {
  var ords = [,'st','nd','rd'];
  var ord, m = n%100;
  return n + ((m > 10 && m < 14)? 'th' : ords[m%10] || 'th');
}

// Return date string two weeks from now (14 days) in 
// format 13th March 2013
function formatDatePlusTwoWeeks(d) {
  var months = ['January','February','March','April','May','June',
                'July','August','September','October','November','December'];

  // Copy date object so don't modify original
  var e = new Date(d);

  // Add two weeks (14 days)
  e.setDate(e.getDate() + 14);
  return addOrd(e.getDate()) + ' ' + months[e.getMonth()] + ' ' + e.getFullYear();
}

alert(formatDatePlusTwoWeeks(new Date(2013,2,13))); // 27th March 2013

Это отлично работает для меня

      ordinal(n) {
    var s = ["th", "st", "nd", "rd"];
    var v = n%100;
    return n + (s[(v-20)%10] || s[v] || s[0]);
}

использование:

      console.log(ordinal(11))
OUTPUT: 11th

Я немного опоздал на вечеринку, но это должно сработать:

function ordinal(number) {
  number = Number(number)
  if(!number || (Math.round(number) !== number)) {
    return number
  }
  var signal = (number < 20) ? number : Number(('' + number).slice(-1))
  switch(signal) {
    case 1:
      return number + 'st'
    case 2:
      return number + 'nd'
    case 3:
      return number + 'rd'
    default:
      return number + 'th'
  }
}

function specialFormat(date) {
  // add two weeks
  date = new Date(+date + 12096e5)
  var months = [
    'January'
    , 'February'
    , 'March'
    , 'April'
    , 'May'
    , 'June'
    , 'July'
    , 'August'
    , 'September'
    , 'October'
    , 'November'
    , 'December'
  ]
  var formatted = ordinal(date.getDate())
  formatted += ' ' + months[date.getMonth()]
  return formatted + ' ' + date.getFullYear()
}

document.body.innerHTML = specialFormat(new Date())

Краткое и компактное решение:

function format(date, tmp){
  return [
    (tmp = date.getDate()) + 
      ([, 'st', 'nd', 'rd'][/1?.$/.exec(tmp)] || 'th'),
    [ 'January', 'February', 'March', 'April',
      'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December'
    ][date.getMonth()],
    date.getFullYear()
  ].join(' ')
}


// 14 days from today

console.log('14 days from today: ' + 
  format(new Date(+new Date + 14 * 864e5)));

// test formatting for all dates within a month from today

var day = 864e5, today = +new Date;
for(var i = 0; i < 32; i++) {
  console.log('Today + ' + i + ': ' + format(new Date(today + i * day)))
}

(Компактный подход, основанный на регулярных выражениях для получения порядкового суффикса, появляется в нескольких местах в Интернете, первоисточник неизвестен)

function getSuffixForDate(day) {
  const lastNumberOfTheDay = day[day.length];

  const suffixes = {
    1: () => 'st',
    21: () => 'st',
    31: () => 'st',
    2: () => 'nd',
    22: () => 'nd',
    3: () => 'rd',
    23: () => 'rd',
  };

  return suffixes[lastNumberOfTheDay] !== undefined ? `${day}${suffixes[lastNumberOfTheDay]()}` : `${day}th`;
}

const date = new Date();
const formattedDate = `${getSuffixForDate(date.getDate())} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;

Человекочитаемая версия...

Я думаю, что это довольно крутой способ получить суффикс даты

            getDateSuffix(datePart: number): string {
        const stAr = [1, 21, 31];
        const ndAr = [2, 22];
        const rdAr = [3, 23];
    
        const suffixesRaw = [
          { suffix: 'st', numbers: stAr },
          { suffix: 'nd', numbers: ndAr },
          { suffix: 'rd', numbers: rdAr },
        ];
    
        const suffixes = suffixesRaw
          .filter(x => x.numbers.filter(y => y == datePart).length > 0)
          .map(z => z.suffix);
    
        return suffixes.length > 0 ? suffixes[0] : 'th';
      }

 Date.prototype.getMonthName = function(shorten) {
  var monthsNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var monthIndex = this.getMonth();
  var tempIndex = -1;
     if (monthIndex == 0){ tempIndex = 0 };
     if (monthIndex == 1){ tempIndex = 1 };
     if (monthIndex == 2){ tempIndex = 2 };
     if (monthIndex == 3){ tempIndex = 3 };
     if (monthIndex == 4){ tempIndex = 4 };
     if (monthIndex == 5){ tempIndex = 5 };
     if (monthIndex == 6){ tempIndex = 6 };
     if (monthIndex == 7){ tempIndex = 7 };
     if (monthIndex == 8){ tempIndex = 8 };
     if (monthIndex == 9){ tempIndex = 9 };
     if (monthIndex == 10){ tempIndex = 10 };
     if (monthIndex == 11){ tempIndex = 11 };

     if (tempIndex > -1) {
   this.monthName = (shorten) ? monthsNames[tempIndex].substring(0, 3) : monthsNames[tempIndex];
     } else {
      this.monthName = "";
     }

     return this.monthName;
 };

    Date.prototype.getDateWithDateOrdinal = function() {
  var d = this.getDate();  // from here on I've used Kennebec's answer, but improved it.
     if(d>3 && d<21) return d+'th';
     switch (d % 10) {
            case 1:  return d+"st";
            case 2:  return d+"nd";
            case 3:  return d+"rd";
            default: return d+"th";
        }
 };

 var myDate = new Date();
    // You may have to check your JS Console in the web browser to see the following
 console.log("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());
    
    // or I will update the Div. using jQuery
    $('#date').html("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="date"></p>

без библиотек JavaScript или большого количества неуклюжего кода

Одним из простых способов добиться этого в ванильном javascript будет использование серии из трех троичных операторов для определения порядкового номера, например:

      let dateOrdinal = 'th';

dateOrdinal = ([1, 21, 31].indexOf(dateNumber) > -1) ? 'st' : dateOrdinal;
dateOrdinal = ([2, 22].indexOf(dateNumber) > -1) ? 'nd' : dateOrdinal;
dateOrdinal = ([3, 23].indexOf(dateNumber) > -1) ? 'rd' : dateOrdinal;

Это не совсем понятно для человека, но вы также можете использовать switch/caseутверждение, чтобы сделать то же самое определение:

      switch (true) {
  
  case ([1, 21, 31].indexOf(dateNumber) > -1) : let dateOrdinal = 'st'; break;
  case ([2, 22].indexOf(dateNumber) > -1) : let dateOrdinal = 'nd'; break;
  case ([3, 23].indexOf(dateNumber) > -1) : let dateOrdinal = 'rd'; break;
  default : let dateOrdinal = 'th';
}

Рабочий пример:

Вот современный подход с использованиемIntlбиблиотека:

Как уже упоминалось, вот другой ответ.

Это напрямую основано на ответе @kennebec, который я нашел самым простым способом получить эту дату, сгенерированную для ординала JavaScript Дата:

Я создал два prototype function следующее:

Date.prototype.getDateWithDateOrdinal = function() {
    var d = this.getDate();  // from here on I've used Kennebec's answer, but improved it.
    if(d>3 && d<21) return d+'th';
    switch (d % 10) {
        case 1:  return d+"st";
        case 2:  return d+"nd";
        case 3:  return d+"rd";
        default: return d+"th";
    }
};

Date.prototype.getMonthName = function(shorten) {
    var monthsNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var monthIndex = this.getMonth();
    var tempIndex = -1;
    if (monthIndex == 0){ tempIndex = 0 };
    if (monthIndex == 1){ tempIndex = 1 };
    if (monthIndex == 2){ tempIndex = 2 };
    if (monthIndex == 3){ tempIndex = 3 };
    if (monthIndex == 4){ tempIndex = 4 };
    if (monthIndex == 5){ tempIndex = 5 };
    if (monthIndex == 6){ tempIndex = 6 };
    if (monthIndex == 7){ tempIndex = 7 };
    if (monthIndex == 8){ tempIndex = 8 };
    if (monthIndex == 9){ tempIndex = 9 };
    if (monthIndex == 10){ tempIndex = 10 };
    if (monthIndex == 11){ tempIndex = 11 };

    if (tempIndex > -1) {
        this.monthName = (shorten) ? monthsNames[tempIndex].substring(0, 3) : monthsNames[tempIndex];
    } else {
        this.monthName = "";
    }

    return this.monthName;
};

Примечание: просто включите выше prototype функции в вашем JS Script и используйте его, как описано ниже.

И всякий раз, когда есть JS дата мне нужно создать дату с порядковым номером даты, я использую этот метод-прототип, как показано ниже, JS Дата:

var myDate = new Date();
// You may have to check your JS Console in the web browser to see the following
console.log("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());

// or I will update the Div. using jQuery
$('#date').html("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());

И он распечатает дату с порядковым номером даты, как показано в следующем живом демо:

 Date.prototype.getMonthName = function(shorten) {
  var monthsNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var monthIndex = this.getMonth();
  var tempIndex = -1;
     if (monthIndex == 0){ tempIndex = 0 };
     if (monthIndex == 1){ tempIndex = 1 };
     if (monthIndex == 2){ tempIndex = 2 };
     if (monthIndex == 3){ tempIndex = 3 };
     if (monthIndex == 4){ tempIndex = 4 };
     if (monthIndex == 5){ tempIndex = 5 };
     if (monthIndex == 6){ tempIndex = 6 };
     if (monthIndex == 7){ tempIndex = 7 };
     if (monthIndex == 8){ tempIndex = 8 };
     if (monthIndex == 9){ tempIndex = 9 };
     if (monthIndex == 10){ tempIndex = 10 };
     if (monthIndex == 11){ tempIndex = 11 };

     if (tempIndex > -1) {
   this.monthName = (shorten) ? monthsNames[tempIndex].substring(0, 3) : monthsNames[tempIndex];
     } else {
      this.monthName = "";
     }

     return this.monthName;
 };

    Date.prototype.getDateWithDateOrdinal = function() {
  var d = this.getDate();  // from here on I've used Kennebec's answer, but improved it.
     if(d>3 && d<21) return d+'th';
     switch (d % 10) {
            case 1:  return d+"st";
            case 2:  return d+"nd";
            case 3:  return d+"rd";
            default: return d+"th";
        }
 };

 var myDate = new Date();
    // You may have to check your JS Console in the web browser to see the following
 console.log("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());
    
    // or I will update the Div. using jQuery
    $('#date').html("date with date ordinal: "+myDate.getDateWithDateOrdinal()+" "+myDate.getMonthName()+" "+myDate.getFullYear());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="date"></p>

,

Вот читаемая версия ES+.

Сильно вдохновлен @user2309185.

const ordinal = (d) => {
  return d + (['st', 'nd', 'rd'][d % 10 - 1] || 'th')
}

Вот простое решение:

var date = today.getDate() + (today.getDate() % 10 == 1 && today.getDate() != 11 ? + 'st': (today.getDate() % 10 == 2 && today.getDate() != 12 ? + 'nd': 

(today.getDate() % 10 == 3 && today.getDate() != 13 ? + 'rd':'th')));

Супер простая функциональная реализация:

const ordinal = (d) => {
  const nth = { '1': 'st', '2': 'nd', '3': 'rd' }
  return `${d}${nth[d] || 'th'}`
}

const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']

const dateString = (date) => `${ordinal(date.getDate())} ${monthNames[date.getMonth()]} ${date.getFullYear()}`

// Use like this: 
dateString(new Date()) // 18th July 2016
Другие вопросы по тегам