JavaScript 新日期序号(st,nd,rd,th)

如果可能的话,在没有 JavaScript 库或者大量繁琐代码的情况下,我正在寻找一种最简单的方法,将两周后的日期格式化为以下格式:

13th March 2013

我使用的代码是:

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

返回两周后的日期和时间,但是像这样: Wed Mar 27201321:50:29 GMT + 0000(GMT Standard Time)2013年3月27日星期三21:50:29 GMT + 0000(GMT 标准时间)

这是 JsFiddle中的代码。

如果你能帮忙,我会很感激的!

72868 次浏览

注意,这适用于从1到31的天数。

const nth = function(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";
}
}


// test code


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


document.getElementById("date").innerHTML = `In two weeks it will be the ${date}<sup>${nth(date)}</sup> of ${month} ${fortnightAway.getFullYear()}`;


// test
const dates = [...Array(32).keys()].slice(1).map(i => `${i}${nth(i)}`)
console.log(dates.join(", "))
sup {
font-size: x-small
}
<span id="date"></span>

Here is a version for any number

const nth = function(d) {
const dString = String(d);
const last = +dString.slice(-2);
if (last > 3 && last < 21) return 'th';
switch (last % 10) {
case 1:  return "st";
case 2:  return "nd";
case 3:  return "rd";
default: return "th";
}
}


// test
const numbers = [...Array(1225).keys()].map(i => `${i}${nth(i)}`)
console.log(numbers.join(", "))
sup {
font-size: x-small
}
<span id="date"></span>

有很多格式化的答案,所以我只需要处理任意整数-的 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();
}


console.log(formatDatePlusTwoWeeks(new Date()));


// Alternative using Intl.DateTimeFormat
function datePlusTwoWeeks(date = new Date()) {
let d = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 14);
let parts = new Intl.DateTimeFormat('en',{
year: 'numeric',
month: 'long',
day: 'numeric'
}).formatToParts(d).reduce((acc, part) => {
acc[part.type] = part.value;
return acc;
}, Object.create(null));
return `${addOrd(parts.day)} ${parts.month} ${parts.year}`;
}


console.log(datePlusTwoWeeks())

我有点迟到了,但这个应该可以:

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

正如许多人提到的,这里有另一个答案。

这是直接基于 @ 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>

.

超级简单的功能实现:

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

强烈受到 @ user2309185的启发。

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

我这样做也是为了日期,但是因为每个月的日期只能在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/#/drbpl

一个简短而紧凑的解决方案:

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)))
}

(基于 regex 的紧凑方法,用于在 Web 上获得序号后缀 出现了 好几个 地方,原始来源未知)

这里是一个受其他答案启发的一行程序。它经过测试,将采取0和负数。

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

更新2020-06-23。以下是上述功能的一个更易读的答案:

const getOrdinalNum = (number) => {
let selector;


if (number <= 0) {
selector = 4;
} else if ((number > 3 && number < 21) || number % 10 > 3) {
selector = 0;
} else {
selector = number % 10;
}


return number + ['th', 'st', 'nd', 'rd', ''][selector];
};




这里有一个简单的解决办法:

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')));

	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>

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()}`;

一个人类可读的版本。

如果您是 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

解决方案海洋中的又一个解决方案。

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

下面是一个简单的函数,它可以处理任意数字:

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

它可以接受数字或数字作为字符串。例如:

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

这是一个可读的 ES + 版本。

const getDateSuffix = (date) => {
const thExpections = date => [11, 12, 13].some(exception => exception === date);
const lastDigit = date % 10;


if (thExpections(date) || lastDigit === 0 || lastDigit > 3) return `${date}th`;
if (lastDigit === 1) return `${date}st`;
if (lastDigit === 2) return `${date}nd`;
return `${date}rd`;
};


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


const twoWeeksFromNow = new Date(+new Date + 12096e5);
console.log(`Two weeks from now: ${getDateSuffix(twoWeeksFromNow.getDate())} ${monthNames[twoWeeksFromNow.getMonth()]} ${twoWeeksFromNow.getFullYear()}`)


console.log(`
=================
Test date suffixes:`);
const logOutDates = new Array(31).fill(0).forEach((_, index) => console.log(getDateSuffix(index + 1)))

这对我很有用

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

这里已经有很多很好的答案,尽管使用 国际复数规则的答案可能仍然有用,国际复数规则标准化了不同地区的序数分类。

下面是 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])
    

const suffix = {
one: 'st',
two: 'nd',
few: 'rd',
other: 'th',
};


document.getElementById("tomorrow-month").innerHTML = new Intl.DateTimeFormat('en-GB', { month: 'long' }).format(new Date(Date.now() + 86400000));
document.getElementById("tomorrow-day").innerHTML = new Intl.DateTimeFormat('en-GB', { day: 'numeric' }).format(new Date(Date.now() + 86400000));
document.getElementById("tomorrow-ordinal").innerHTML = suffix[new Intl.PluralRules('en-GB', { type: 'ordinal' }).select(new Date(Date.now() + 86400000).getDate())];


document.getElementById("yesterday-month").innerHTML = new Intl.DateTimeFormat('en-GB', { month: 'long' }).format(new Date(Date.now() - 86400000));
document.getElementById("yesterday-day").innerHTML = new Intl.DateTimeFormat('en-GB', { day: 'numeric' }).format(new Date(Date.now() - 86400000));
document.getElementById("yesterday-ordinal").innerHTML = suffix[new Intl.PluralRules('en-GB', { type: 'ordinal' }).select(new Date(Date.now() - 86400000).getDate())];
Tomorrow, on <span id="tomorrow-month"></span> <span id="tomorrow-day"></span><sup id="tomorrow-ordinal"></sup>, I ordered a time machine.
It arrived yesterday on <span id="yesterday-month"></span> <span id="yesterday-day"></span><sup id="yesterday-ordinal"></sup>.

没有 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';
}

工作范例:

// GET DATE PARTS
const dateInTwoWeeks = new Date(+new Date + 12096e5);
const dateNumber = dateInTwoWeeks.getDate();
const dateMonth = dateInTwoWeeks.toLocaleString('default', {month: 'long'});
const dateYear = dateInTwoWeeks.getFullYear();


// DETERMINE DATE ORDINAL
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;


// FORMAT DATE AS STRING
const dateInTwoWeeksString = `${dateNumber}${dateOrdinal} ${dateMonth} ${dateYear}`;


document.body.textContent = dateInTwoWeeksString;

如果你是 dayjs 的粉丝,现在你更喜欢 dayjs,这里有一个例子:

你可以只做 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) :

enter image description here

我觉得这样得到日期后缀很酷

      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';
}