วิธีจัดรูปแบบวันที่ JavaScript

ใน JavaScript ฉันจะจัดรูปแบบวัตถุวันที่เพื่อพิมพ์เป็น10-Aug-2010อย่างไร

สำหรับรูปแบบวันที่กำหนดเขตคุณต้องดึงองค์ประกอบวันที่ (หรือเวลา) ออกจากDateTimeFormatวัตถุ (ซึ่งเป็นส่วนหนึ่งของECMAScript Internationalization API ) แล้วสร้างสตริงด้วยตัวคั่นที่คุณต้องการด้วยตนเอง

หากต้องการทำสิ่งนี้คุณสามารถใช้DateTimeFormat#formatToParts:

const date = new Date('2010-08-05')
const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' }) 
const [{ value: month },,{ value: day },,{ value: year }] = dateTimeFormat .formatToParts(date ) 

console.log(`${day}-${month}-${year }`)
console.log(`${day}👠${month}👢${year}`) // just for fun

คุณยังสามารถดึงส่วนต่าง ๆ ของการDateTimeFormatใช้แบบทีละตัวได้DateTimeFormat#formatแต่โปรดทราบว่าเมื่อใช้วิธีนี้ในเดือนมีนาคม 2020 มีข้อผิดพลาดในการใช้งาน ECMAScript เมื่อมันมาถึงศูนย์นำหน้าในนาทีและวินาที (บั๊กนี้ ถูกหลีกเลี่ยงโดยวิธีการด้านบน)

const d = new Date('2010-08-05')
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d)
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)

console.log(`${da}-${mo}-${ye}`)

เมื่อทำงานกับวันที่และเวลามักจะคุ้มค่าที่จะใช้ห้องสมุด (เช่นmoment.js , luxon ) เนื่องจากความซับซ้อนที่ซ่อนอยู่มากมายของสนาม

โปรดทราบว่า ECMAScript Internationalization API ที่ใช้ในการแก้ปัญหาข้างต้นไม่ได้รับการรองรับใน IE10 ( ส่วนแบ่งตลาดเบราว์เซอร์ทั่วโลก0.03%ในเดือนกุมภาพันธ์ 2020)

หากคุณต้องการควบคุมการจัดรูปแบบน้อยกว่าคำตอบที่ยอมรับในปัจจุบันDate#toLocaleDateStringสามารถใช้เพื่อสร้างการเรนเดอร์เฉพาะโลแคลมาตรฐาน localeและoptionsข้อโต้แย้งให้การใช้งานที่ระบุภาษาที่มีการจัดรูปแบบการประชุมควรจะใช้และช่วยให้การปรับแต่งการแสดงผลบางอย่าง

ตัวเลือกตัวอย่างสำคัญ:

1. วัน:
   การเป็นตัวแทนของวัน
   ค่าที่เป็นไปได้คือ "ตัวเลข", "2 หลัก"
2. วันทำงาน:
   การเป็นตัวแทนของวันทำงาน
   ค่าที่เป็นไปได้คือ "แคบ", "สั้น", "ยาว"
3. ปี:
   การเป็นตัวแทนของปี
   ค่าที่เป็นไปได้คือ "ตัวเลข", "2 หลัก"
4. เดือน:
   การเป็นตัวแทนของเดือน
   ค่าที่เป็นไปได้คือ "ตัวเลข", "2 หลัก", "แคบ", "สั้น", "ยาว"
5. ชั่วโมง:
   การเป็นตัวแทนของชั่วโมง
   ค่าที่เป็นไปได้คือ "ตัวเลข", "2 หลัก"
6. นาที: การแทนค่านาที
   ค่าที่เป็นไปได้คือ "ตัวเลข", "2 หลัก"
7. second:
   การแทนค่าของวินาที
   ค่าที่เป็นไปได้คือ "ตัวเลข" 2 หลัก "

ปุ่มเหล่านี้เป็นทางเลือก คุณสามารถเปลี่ยนจำนวนของค่าตัวเลือกตามความต้องการของคุณและสิ่งนี้จะสะท้อนให้เห็นถึงการปรากฏตัวของแต่ละช่วงเวลาวันที่

หมายเหตุ: หากคุณต้องการกำหนดค่าตัวเลือกเนื้อหาเท่านั้น แต่ยังคงใช้ภาษาปัจจุบันการส่งผ่านnullพารามิเตอร์แรกจะทำให้เกิดข้อผิดพลาด ใช้undefinedแทน

สำหรับภาษาต่าง ๆ :

1. "en-US":สำหรับภาษาอังกฤษ
2. "hi-IN":สำหรับภาษาฮินดี
3. "ja-JP":สำหรับภาษาญี่ปุ่น

คุณสามารถใช้ตัวเลือกภาษาเพิ่มเติม

ตัวอย่างเช่น

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

คุณยังสามารถใช้toLocaleString()วิธีการเพื่อจุดประสงค์เดียวกัน ความแตกต่างเพียงอย่างเดียวคือฟังก์ชั่นนี้ให้เวลาเมื่อคุณไม่ผ่านตัวเลือกใด ๆ

// Example
9/17/2016, 1:21:34 PM

อ้างอิง:

• toLocaleString()

• toLocaleDateString()

ใช้ไลบรารี date.format :

var dateFormat = require('dateformat');
var now = new Date();
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");

ผลตอบแทน:

Saturday, June 9th, 2007, 5:46:21 PM 

วันที่จัดรูปแบบใน npm

http://jsfiddle.net/phZr7/1/

หากคุณต้องการได้อย่างรวดเร็วรูปแบบวันธรรมดาของคุณโดยใช้ JavaScript, การใช้งานgetDate, getMonth + 1, getFullYear, getHoursและgetMinutes:

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

หรือถ้าคุณต้องการให้มันเต็มด้วยศูนย์:

var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50

สิ่งที่ฉันต้องการคือการแปลงวันที่วันนี้เป็นสตริงวันที่เป็นมิตรกับMySQLเช่น 2012-06-23 และใช้สตริงนั้นเป็นพารามิเตอร์ในหนึ่งในแบบสอบถามของฉัน วิธีแก้ปัญหาง่ายๆที่ฉันพบคือ:

var today = new Date().toISOString().slice(0, 10);

โปรดทราบว่าโซลูชันข้างต้นไม่ได้คำนึงถึงเขตเวลาของคุณ

คุณอาจลองใช้ฟังก์ชั่นนี้แทน:

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

สิ่งนี้จะให้วันที่ที่ถูกต้องแก่คุณในกรณีที่คุณใช้รหัสนี้ในช่วงเริ่มต้น / สิ้นสุดของวัน

• ตัวอย่าง: http://jsfiddle.net/simo/sapuhzmm/
• Date.toISOString
• Date.toJSON
• String.slice

ฟังก์ชั่นการจัดรูปแบบที่กำหนดเอง:

สำหรับรูปแบบคงที่ฟังก์ชั่นที่เรียบง่ายทำให้งาน ตัวอย่างต่อไปนี้สร้างรูปแบบสากล YYYY-MM-DD:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

รูปแบบ OP อาจถูกสร้างเช่น:

function dateToYMD(date) {
    var strArray=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

หมายเหตุ: อย่างไรก็ตามโดยทั่วไปแล้วไม่ใช่ความคิดที่ดีที่จะขยายไลบรารีมาตรฐาน JavaScript (เช่นโดยการเพิ่มฟังก์ชั่นนี้ในต้นแบบของ Date)

ฟังก์ชั่นขั้นสูงมากขึ้นสามารถสร้างผลลัพธ์ที่กำหนดค่าได้ตามพารามิเตอร์รูปแบบ

หากการเขียนฟังก์ชั่นการจัดรูปแบบนั้นยาวเกินไปก็จะมีห้องสมุดอยู่รอบตัวมากมาย บางคำตอบอื่น ๆ ระบุไว้แล้ว แต่การพึ่งพาที่เพิ่มขึ้นก็มีส่วนที่

ฟังก์ชันการจัดรูปแบบ ECMAScript มาตรฐาน:

เนื่องจากเวอร์ชันล่าสุดของ ECMAScript Dateคลาสมีฟังก์ชันการจัดรูปแบบเฉพาะ:

toDateString : การติดตั้งใช้งานแสดงเฉพาะวันที่

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.todatestring

new Date().toDateString(); // e.g. "Fri Nov 11 2016"

toISOString : แสดง ISO 8601 วันที่และเวลา

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.toisostring

new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

toJSON : Stringifier สำหรับ JSON

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tojson

new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

toLocaleDateString : ขึ้นอยู่กับการนำไปใช้งานวันที่ในรูปแบบโลแคล

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaledatestring

new Date().toLocaleDateString(); // e.g. "21/11/2016"

toLocaleString : การนำไปใช้งานขึ้นอยู่กับวันที่และเวลาในรูปแบบโลแคล

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocalestring

new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

toLocaleTimeString : การดำเนินการขึ้นอยู่กับเวลาในรูปแบบสถานที่

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

toString : toStringทั่วไปสำหรับวันที่

http://www.ecma-international.org/ecma-262/7.0/index.html#sec-date.prototype.tostring

new Date().toString(); // e.g. "Fri Nov 21 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

หมายเหตุ: เป็นไปได้ที่จะสร้างเอาต์พุตที่กำหนดเองจากการจัดรูปแบบเหล่านั้น>

new Date().toISOString().slice(0,10); //return YYYY-MM-DD

ตัวอย่างโค้ด:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));

หากคุณใช้ jQuery UI อยู่แล้วในโครงการของคุณคุณสามารถทำได้ด้วยวิธีนี้:

var formatted = $.datepicker.formatDate("M d, yy", new Date("2014-07-08T09:02:21.377"));

// formatted will be 'Jul 8, 2014'

ตัวเลือกรูปแบบวันที่ datepicker บางคนที่จะเล่นกับที่มีอยู่ที่นี่

ฉันคิดว่าคุณสามารถใช้ วิธีวันที่ที่ไม่ได้มาตรฐานtoLocaleFormat(formatString)

formatString:สตริงรูปแบบในรูปแบบเดียวกับที่คาดไว้โดยstrftime()ฟังก์ชันใน C

var today = new Date();
today.toLocaleFormat('%d-%b-%Y'); // 30-Dec-2011

อ้างอิง:

• tolocaleformat
• strftime

JavaScript ธรรมดาคือตัวเลือกที่ดีที่สุดสำหรับผู้สร้างรายเล็ก

ในทางตรงกันข้ามถ้าคุณต้องการข้อมูลเพิ่มเติมMomentJSเป็นทางออกที่ดี

ตัวอย่างเช่น:

moment().format('YYYY-MM-DD HH:m:s');     // now() -> 2015-03-24 14:32:20
moment("20111031", "YYYYMMDD").fromNow(); // 3 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 11 hours ago
moment().endOf('day').fromNow();          // in 13 hours

ในเบราว์เซอร์สมัยใหม่(*)คุณสามารถทำได้ดังนี้:

var today = new Date().toLocaleDateString('en-GB', {
    day : 'numeric',
    month : 'short',
    year : 'numeric'
}).split(' ').join('-');

ผลลัพธ์หากดำเนินการวันนี้ (มกราคม24ᵗʰ, 2016):

'24-Jan-2016'

(*) ตาม MDN "เบราว์เซอร์ที่ทันสมัย" หมายถึง Chrome 24 +, Firefox 29+, Internet Explorer 11 ขอบ 12+, Opera 15+ และ Safari คืนสร้าง

คุณควรมีลักษณะที่date.js มันเพิ่มผู้ช่วยที่สะดวกมากมายสำหรับการทำงานกับวันที่เช่นในกรณีของคุณ:

var date = Date.parse('2010-08-10');
console.log(date.toString('dd-MMM-yyyy'));

เริ่มต้นใช้งาน: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

ฉันสามารถรับรูปแบบที่คุณต้องการในหนึ่งบรรทัดโดยไม่ใช้ไลบรารีและไม่มีวิธีการแบบวันที่เพียงแค่ regex:

var d = (new Date()).toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3');
// date will be formatted as "14-Oct-2015" (pass any date object in place of 'new Date()')

ในการทดสอบของฉันสิ่งนี้ทำงานได้อย่างน่าเชื่อถือในเบราว์เซอร์หลัก (Chrome, Safari, Firefox และ IE) ตามที่ @RGG ชี้ให้เห็นว่าผลลัพธ์ของ Date.prototype.toString () นั้นขึ้นอยู่กับการนำไปใช้ดังนั้นเพียงทดสอบผลลัพธ์ให้แน่ใจ มันทำงานได้ดีในเครื่องมือ JavaScript ของคุณ คุณสามารถเพิ่มโค้ดบางส่วนเพื่อทดสอบเอาต์พุตสตริงและตรวจสอบให้แน่ใจว่ามันตรงกับสิ่งที่คุณคาดไว้ก่อนที่คุณจะทำการแทนที่ regex

@ Sébastien - ทางเลือกที่รองรับเบราว์เซอร์ทั้งหมด

new Date(parseInt(496407600)*1000).toLocaleDateString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\./g, '/');

เอกสารประกอบ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

ตกลงเราได้รับบางสิ่งที่เรียกว่าIntlซึ่งมีประโยชน์มากสำหรับการจัดรูปแบบวันที่ใน JavaScript วันนี้

วันที่ของคุณดังต่อไปนี้:

var date = '10/8/2010';

และคุณเปลี่ยนเป็นวันที่โดยใช้วันที่ใหม่ () เช่นด้านล่าง:

date = new Date(date);

และตอนนี้คุณสามารถจัดรูปแบบได้ตามที่คุณต้องการโดยใช้รายการตำแหน่งที่ตั้งดังต่อไปนี้:

date = new Intl.DateTimeFormat('en-AU').format(date); // Australian date format: "8/10/2010" 

date = new Intl.DateTimeFormat('en-US').format(date); // USA date format: "10/8/2010" 

date = new Intl.DateTimeFormat('ar-EG').format(date);  // Arabic date format: "٨‏/١٠‏/٢٠١٠"

หากคุณต้องการรูปแบบที่คุณกล่าวถึงข้างต้นคุณสามารถทำได้:

date = new Date(Date.UTC(2010, 7, 10, 0, 0, 0));
var options = {year: "numeric", month: "short", day: "numeric"};
date = new Intl.DateTimeFormat("en-AU", options).format(date).replace(/\s/g, '-');

และผลลัพธ์จะเป็น:

"10-Aug-2010"

สำหรับข้อมูลเพิ่มเติมโปรดดูที่API สนามบินนานาชาติและIntl.DateTimeFormatเอกสาร

การใช้เท็มเพลตสตริง ECMAScript Edition 6 (ES6 / ES2015):

let d = new Date();
let formatted = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

หากคุณต้องการเปลี่ยนตัวคั่น:

const delimiter = '/';
let formatted = [d.getFullYear(), d.getMonth() + 1, d.getDate()].join(delimiter);

โซลูชันสำเร็จรูป: Luxon

หากคุณต้องการใช้โซลูชันเดียวที่เหมาะกับทุกคนฉันขอแนะนำให้ใช้ Luxon ( Moment.jsรุ่นที่ทันสมัย) ซึ่งทำการฟอร์แมตในสถานที่ / ภาษาและคุณสมบัติอื่น ๆ อีกมากมาย

Luxon โฮสต์บนเว็บไซต์ Moment.js และพัฒนาโดยผู้พัฒนา Moment.js เนื่องจาก Moment.js มีข้อ จำกัด ที่ผู้พัฒนาต้องการที่จะอยู่ แต่ทำไม่ได้

ติดตั้ง:

npm install luxonหรือyarn add luxon(เยี่ยมชมลิงค์สำหรับวิธีการติดตั้งอื่น ๆ )

ตัวอย่าง:

luxon.DateTime.fromISO('2010-08-10').toFormat('yyyy-LLL-dd');

อัตราผลตอบแทน:

10 ส.ค. 2010

คู่มือการแก้ปัญหา

ด้วยการจัดรูปแบบที่คล้ายกันเช่น Moment.js, Class DateTimeFormatter (Java)และClass SimpleDateFormat (Java)ฉันได้ติดตั้งโซลูชันformatDate(date, patternStr)ที่ครอบคลุมซึ่งโค้ดอ่านและแก้ไขได้ง่าย คุณสามารถแสดงวันที่เวลา AM / PM และอื่น ๆ ดูรหัสสำหรับตัวอย่างเพิ่มเติม

ตัวอย่าง:

formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss:S')

( formatDateมีการใช้งานในข้อมูลโค้ดด้านล่าง)

อัตราผลตอบแทน:

วันศุกร์ที่ 12 ตุลาคม 2561 18: 11: 23: 445

ลองใช้รหัสโดยคลิก "เรียกใช้ข้อมูลโค้ด"

รูปแบบวันที่และเวลา

yy= ปี 2 หลัก; yyyy= เต็มปี

M= เดือนหลัก MM= เดือน 2 หลัก MMM= ชื่อเดือนสั้น MMMM= ชื่อเดือนเต็ม

EEEE= ชื่อวันทำงานเต็ม EEE= ชื่อวันทำงานสั้น

d= วันหลัก; dd= วันที่ 2 หลัก

h= ชั่วโมง am / pm; hh= ชั่วโมง 2 หลัก am / pm; H= ชั่วโมง HH= ชั่วโมง 2 หลัก

m= นาที; mm= นาที 2 หลัก; aaa= AM / PM

s= วินาที; ss= วินาที 2 หลัก

S = miliseconds

var monthNames = [
  "January", "February", "March", "April", "May", "June", "July",
  "August", "September", "October", "November", "December"
];
var dayOfWeekNames = [
  "Sunday", "Monday", "Tuesday",
  "Wednesday", "Thursday", "Friday", "Saturday"
];
function formatDate(date, patternStr){
    if (!patternStr) {
        patternStr = 'M/d/yyyy';
    }
    var day = date.getDate(),
        month = date.getMonth(),
        year = date.getFullYear(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        miliseconds = date.getMilliseconds(),
        h = hour % 12,
        hh = twoDigitPad(h),
        HH = twoDigitPad(hour),
        mm = twoDigitPad(minute),
        ss = twoDigitPad(second),
        aaa = hour < 12 ? 'AM' : 'PM',
        EEEE = dayOfWeekNames[date.getDay()],
        EEE = EEEE.substr(0, 3),
        dd = twoDigitPad(day),
        M = month + 1,
        MM = twoDigitPad(M),
        MMMM = monthNames[month],
        MMM = MMMM.substr(0, 3),
        yyyy = year + "",
        yy = yyyy.substr(2, 2)
    ;
    // checks to see if month name will be used
    patternStr = patternStr
      .replace('hh', hh).replace('h', h)
      .replace('HH', HH).replace('H', hour)
      .replace('mm', mm).replace('m', minute)
      .replace('ss', ss).replace('s', second)
      .replace('S', miliseconds)
      .replace('dd', dd).replace('d', day)
      
      .replace('EEEE', EEEE).replace('EEE', EEE)
      .replace('yyyy', yyyy)
      .replace('yy', yy)
      .replace('aaa', aaa);
    if (patternStr.indexOf('MMM') > -1) {
        patternStr = patternStr
          .replace('MMMM', MMMM)
          .replace('MMM', MMM);
    }
    else {
        patternStr = patternStr
          .replace('MM', MM)
          .replace('M', M);
    }
    return patternStr;
}
function twoDigitPad(num) {
    return num < 10 ? "0" + num : num;
}
console.log(formatDate(new Date()));
console.log(formatDate(new Date(), 'dd-MMM-yyyy')); //OP's request
console.log(formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss.S aaa'));
console.log(formatDate(new Date(), 'EEE, MMM d, yyyy HH:mm'));
console.log(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss.S'));
console.log(formatDate(new Date(), 'M/dd/yyyy h:mmaaa'));

ขอบคุณ @Gerry สำหรับการนำ Luxon ขึ้นมา

นี่คือรหัสที่ฉันเพิ่งเขียนเพื่อจัดการกับการจัดรูปแบบวันที่สำหรับโครงการที่ฉันกำลังทำอยู่ มันเลียนแบบฟังก์ชันการจัดรูปแบบวันที่ของ PHP เพื่อให้เหมาะกับความต้องการของฉัน รู้สึกอิสระที่จะใช้มันเพียงแค่ขยายวัตถุ Date () ที่มีอยู่แล้ว นี่อาจไม่ใช่ทางออกที่ดีที่สุด แต่ใช้ได้สำหรับความต้องการของฉัน

var d = new Date(); 
d_string = d.format("m/d/Y h:i:s");

/**************************************
 * Date class extension
 * 
 */
    // Provide month names
    Date.prototype.getMonthName = function(){
        var month_names = [
                            'January',
                            'February',
                            'March',
                            'April',
                            'May',
                            'June',
                            'July',
                            'August',
                            'September',
                            'October',
                            'November',
                            'December'
                        ];

        return month_names[this.getMonth()];
    }

    // Provide month abbreviation
    Date.prototype.getMonthAbbr = function(){
        var month_abbrs = [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ];

        return month_abbrs[this.getMonth()];
    }

    // Provide full day of week name
    Date.prototype.getDayFull = function(){
        var days_full = [
                            'Sunday',
                            'Monday',
                            'Tuesday',
                            'Wednesday',
                            'Thursday',
                            'Friday',
                            'Saturday'
                        ];
        return days_full[this.getDay()];
    };

    // Provide full day of week name
    Date.prototype.getDayAbbr = function(){
        var days_abbr = [
                            'Sun',
                            'Mon',
                            'Tue',
                            'Wed',
                            'Thur',
                            'Fri',
                            'Sat'
                        ];
        return days_abbr[this.getDay()];
    };

    // Provide the day of year 1-365
    Date.prototype.getDayOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((this - onejan) / 86400000);
    };

    // Provide the day suffix (st,nd,rd,th)
    Date.prototype.getDaySuffix = function() {
        var d = this.getDate();
        var sfx = ["th","st","nd","rd"];
        var val = d%100;

        return (sfx[(val-20)%10] || sfx[val] || sfx[0]);
    };

    // Provide Week of Year
    Date.prototype.getWeekOfYear = function() {
        var onejan = new Date(this.getFullYear(),0,1);
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
    } 

    // Provide if it is a leap year or not
    Date.prototype.isLeapYear = function(){
        var yr = this.getFullYear();

        if ((parseInt(yr)%4) == 0){
            if (parseInt(yr)%100 == 0){
                if (parseInt(yr)%400 != 0){
                    return false;
                }
                if (parseInt(yr)%400 == 0){
                    return true;
                }
            }
            if (parseInt(yr)%100 != 0){
                return true;
            }
        }
        if ((parseInt(yr)%4) != 0){
            return false;
        } 
    };

    // Provide Number of Days in a given month
    Date.prototype.getMonthDayCount = function() {
        var month_day_counts = [
                                    31,
                                    this.isLeapYear() ? 29 : 28,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31,
                                    31,
                                    30,
                                    31,
                                    30,
                                    31
                                ];

        return month_day_counts[this.getMonth()];
    } 

    // format provided date into this.format format
    Date.prototype.format = function(dateFormat){
        // break apart format string into array of characters
        dateFormat = dateFormat.split("");

        var date = this.getDate(),
            month = this.getMonth(),
            hours = this.getHours(),
            minutes = this.getMinutes(),
            seconds = this.getSeconds();
        // get all date properties ( based on PHP date object functionality )
        var date_props = {
            d: date < 10 ? '0'+date : date,
            D: this.getDayAbbr(),
            j: this.getDate(),
            l: this.getDayFull(),
            S: this.getDaySuffix(),
            w: this.getDay(),
            z: this.getDayOfYear(),
            W: this.getWeekOfYear(),
            F: this.getMonthName(),
            m: month < 10 ? '0'+(month+1) : month+1,
            M: this.getMonthAbbr(),
            n: month+1,
            t: this.getMonthDayCount(),
            L: this.isLeapYear() ? '1' : '0',
            Y: this.getFullYear(),
            y: this.getFullYear()+''.substring(2,4),
            a: hours > 12 ? 'pm' : 'am',
            A: hours > 12 ? 'PM' : 'AM',
            g: hours % 12 > 0 ? hours % 12 : 12,
            G: hours > 0 ? hours : "12",
            h: hours % 12 > 0 ? hours % 12 : 12,
            H: hours,
            i: minutes < 10 ? '0' + minutes : minutes,
            s: seconds < 10 ? '0' + seconds : seconds           
        };

        // loop through format array of characters and add matching data else add the format character (:,/, etc.)
        var date_string = "";
        for(var i=0;i<dateFormat.length;i++){
            var f = dateFormat[i];
            if(f.match(/[a-zA-Z]/g)){
                date_string += date_props[f] ? date_props[f] : '';
            } else {
                date_string += f;
            }
        }

        return date_string;
    };
/*
 *
 * END - Date class extension
 * 
 ************************************/

โซลูชัน JavaScript โดยไม่ต้องใช้ไลบรารีภายนอก:

var now = new Date()
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
var formattedDate = now.getDate() + "-" + months[now.getMonth()] + "-" + now.getFullYear()
alert(formattedDate)

new Date().toLocaleDateString()

// "3/21/2018"

เอกสารเพิ่มเติมที่developer.mozilla.org

หากคุณกำลังใช้ jQuery UI formatDate()ในรหัสของคุณจะมีฟังก์ชั่นที่เรียกว่า ฉันใช้วิธีนี้ในการจัดรูปแบบวันที่วันนี้:

var testdate = Date();
testdate = $.datepicker.formatDate( "d-M-yy",new Date(testdate));
alert(testdate);

คุณสามารถดู ตัวอย่างอื่น ๆ ของการจัดรูปแบบวันที่ในเอกสาร

เรามีวิธีแก้ปัญหามากมายสำหรับสิ่งนี้ แต่ฉันคิดว่าสิ่งที่ดีที่สุดของพวกเขาคือ Moment.js ดังนั้นฉันแนะนำให้ใช้ Moment.js เป็นการส่วนตัวสำหรับวันที่และเวลา

console.log(moment().format('DD-MMM-YYYY'));

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

วิธีที่มีประโยชน์และยืดหยุ่นสำหรับการจัดรูปแบบ DateTimes ใน JavaScript คือIntl.DateTimeFormat:

var date = new Date();
var options = { year: 'numeric', month: 'short', day: '2-digit'};
var _resultDate = new Intl.DateTimeFormat('en-GB', options).format(date);
// The _resultDate is: "12 Oct 2017"
// Replace all spaces with - and then log it.
console.log(_resultDate.replace(/ /g,'-'));

ผลลัพธ์คือ: "12-Oct-2017"

รูปแบบวันที่และเวลาสามารถปรับแต่งได้โดยใช้อาร์กิวเมนต์ตัวเลือก

Intl.DateTimeFormatวัตถุเป็นตัวสร้างสำหรับวัตถุที่ช่วยให้ภาษาวันที่มีความสำคัญและเวลาการจัดรูปแบบ

วากยสัมพันธ์

new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])

พารามิเตอร์

สถานที่

ไม่จำเป็น. สตริงที่มีแท็กภาษา BCP 47 หรืออาร์เรย์ของสตริงดังกล่าว สำหรับรูปแบบทั่วไปและการตีความอาร์กิวเมนต์โลแคลให้ดูที่หน้า Intl อนุญาตให้ใช้คีย์ส่วนขยาย Unicode ต่อไปนี้:

nu
Numbering system. Possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
ca
Calendar. Possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".

ตัวเลือก

ไม่จำเป็น. วัตถุที่มีคุณสมบัติต่อไปนี้บางส่วนหรือทั้งหมด:

localeMatcher

อัลกอริทึมการจับคู่สถานที่ที่จะใช้ ค่าที่เป็นไปได้คือ"lookup"และ"best fit"; "best fit"เริ่มต้นคือ สำหรับข้อมูลเกี่ยวกับตัวเลือกนี้ให้ดูที่หน้า Intl

เขตเวลา

เขตเวลาที่จะใช้ มูลค่าเพียงการใช้งานที่ต้องตระหนักคือ"UTC"; ค่าเริ่มต้นคือเขตเวลาเริ่มต้นของรันไทม์ การใช้งานนอกจากนี้ยังอาจจะไม่รู้จักชื่อโซนเวลาของฐานข้อมูลเขตเวลา IANA เช่น"Asia/Shanghai", "Asia/Kolkata","America/New_York" ,

hour12

ใช้เวลา 12 ชั่วโมงหรือไม่ (เทียบกับเวลา 24 ชั่วโมง) ค่าที่เป็นไปได้คือtrueและfalse; ค่าเริ่มต้นขึ้นอยู่กับสถานที่

formatMatcher

อัลกอริทึมการจับคู่รูปแบบที่จะใช้ ค่าที่เป็นไปได้คือ"basic"และ"best fit"; ค่าเริ่มต้นคือ"best fit"เริ่มต้นคือดูย่อหน้าต่อไปนี้สำหรับข้อมูลเกี่ยวกับการใช้คุณสมบัตินี้

คุณสมบัติต่อไปนี้อธิบายถึงส่วนประกอบของวันที่และเวลาเพื่อใช้ในเอาต์พุตที่จัดรูปแบบและการแสดงที่ต้องการ การใช้งานจะต้องสนับสนุนอย่างน้อยชุดย่อยต่อไปนี้:

weekday, year, month, day, hour, minute, second
weekday, year, month, day
year, month, day
year, month
month, day
hour, minute, second
hour, minute

การนำไปใช้อาจสนับสนุนชุดย่อยอื่น ๆ และคำขอจะถูกเจรจากับชุดค่าผสมย่อยที่เป็นตัวแทนทั้งหมดที่มีอยู่เพื่อค้นหาคู่ที่ดีที่สุด อัลกอริทึมสองพร้อมใช้งานสำหรับการเจรจานี้และเลือกโดยคุณสมบัติ formatMatcher: ระบุอย่างสมบูรณ์"basic"อัลกอริทึมที่

ในวันทำงาน

การเป็นตัวแทนของวันทำงาน ค่าที่เป็นไปได้"narrow", ,"short""long"

ยุค

การเป็นตัวแทนของยุคสมัย ค่าที่เป็นไปได้"narrow", ,"short""long"

ปี

การเป็นตัวแทนของปี ค่าที่เป็นไปได้,"numeric""2-digit"

เดือน

การเป็นตัวแทนของเดือน ค่าที่เป็นไปได้"numeric", "2-digit", "narrow", ,"short""long"

วัน

การเป็นตัวแทนของวัน ค่าที่เป็นไปได้"numeric","2-digit" ,

ชั่วโมง

การเป็นตัวแทนของชั่วโมง ค่าที่เป็นไปได้,"numeric""2-digit"

นาที

การเป็นตัวแทนของนาที ค่าที่เป็นไปได้,"numeric""2-digit"

ที่สอง

การเป็นตัวแทนของที่สอง ค่าที่เป็นไปได้,"numeric""2-digit"

timeZoneName

การแสดงชื่อเขตเวลา ค่าที่เป็นไปได้,"short" "long"ค่าเริ่มต้นสำหรับแต่ละคุณสมบัติส่วนประกอบวันที่เวลาจะไม่ได้กำหนด "numeric"แต่ถ้าคุณสมบัติองค์ประกอบทั้งหมดจะไม่ได้กำหนดแล้วปีเดือนและวันจะถือว่าเป็น

ตรวจสอบออนไลน์

รายละเอียดเพิ่มเติม

วิธีนี้อาจช่วยแก้ไขปัญหา:

var d = new Date();

var options = {   
    day: 'numeric',
    month: 'long', 
    year: 'numeric'
};

console.log(d.toLocaleDateString('en-ZA', options));

นี่คือวิธีที่ฉันใช้สำหรับปลั๊กอิน npm ของฉัน

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

var Days = [
  "Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday", "Friday", "Saturday"
];

var formatDate = function(dt,format){
  format = format.replace('ss', pad(dt.getSeconds(),2));
  format = format.replace('s', dt.getSeconds());
  format = format.replace('dd', pad(dt.getDate(),2));
  format = format.replace('d', dt.getDate());
  format = format.replace('mm', pad(dt.getMinutes(),2));
  format = format.replace('m', dt.getMinutes());
  format = format.replace('MMMM', monthNames[dt.getMonth()]);
  format = format.replace('MMM', monthNames[dt.getMonth()].substring(0,3));
  format = format.replace('MM', pad(dt.getMonth()+1,2));
  format = format.replace(/M(?![ao])/, dt.getMonth()+1);
  format = format.replace('DD', Days[dt.getDay()]);
  format = format.replace(/D(?!e)/, Days[dt.getDay()].substring(0,3));
  format = format.replace('yyyy', dt.getFullYear());
  format = format.replace('YYYY', dt.getFullYear());
  format = format.replace('yy', (dt.getFullYear()+"").substring(2));
  format = format.replace('YY', (dt.getFullYear()+"").substring(2));
  format = format.replace('HH', pad(dt.getHours(),2));
  format = format.replace('H', dt.getHours());
  return format;
}

pad = function(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

var today = new Date();
var formattedToday = today.toLocaleDateString() + ' ' + today.toLocaleTimeString();

Sugar.js มีส่วนขยายที่ยอดเยี่ยมสำหรับวัตถุ Date รวมถึงDate.formatวิธี

ตัวอย่างจากเอกสาร:

Date.create().format('{Weekday} {Month} {dd}, {yyyy}');

Date.create().format('{12hr}:{mm}{tt}')

สำหรับผู้ที่กำลังมองหาโซลูชัน ES6 ที่ใช้งานง่ายเพื่อคัดลอกวางและปรับใช้:

const dateToString = d => `${d.getFullYear()}-${('00' + (d.getMonth() + 1)).slice(-2)}-${('00' + d.getDate()).slice(-2)}` 

// how to use:
const myDate = new Date(Date.parse('04 Dec 1995 00:12:00 GMT'))
console.log(dateToString(myDate)) // 1995-12-04

ตั้งแต่ปี 2019 ดูเหมือนว่าคุณจะได้รับ LocaleDateString เพื่อส่งคืนเฉพาะบางส่วนแล้วคุณสามารถเข้าร่วมได้ตามที่คุณต้องการ:

var date = new Date();

console.log(date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + "-"+ date.toLocaleDateString("en-US", { month: 'short' })
            + "-" + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> 16-Nov-2019

console.log(date.toLocaleDateString("en-US", { month: 'long' }) 
            + " " + date.toLocaleDateString("en-US", { day: 'numeric' }) 
            + ", " + date.toLocaleDateString("en-US", { year: 'numeric' }) );

> November 16, 2019

คุณควรดูที่DayJs มันเป็นการสร้างช่วงเวลาใหม่ แต่สถาปัตยกรรมแบบโมดูลาร์ที่เน้นไปที่เบามาก

Fast 2kB แทน Moment.js ด้วย API ที่ทันสมัยแบบเดียวกัน

Day.js เป็นไลบรารี JavaScript ที่เรียบง่ายที่แยกวิเคราะห์ตรวจสอบและแสดงวันที่และเวลาสำหรับเบราว์เซอร์ที่ทันสมัยด้วย API ที่เข้ากันได้กับ Moment.js หากคุณใช้ Moment.js คุณก็รู้วิธีใช้ Day.js อยู่แล้ว

var date = Date.now();
const formatedDate = dayjs(date).format("YYYY-MM-DD")
console.log(formatedDate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.8.16/dayjs.min.js" crossorigin="anonymous"></script>

ในการรับ "10 ส.ค. 2010" ให้ลอง:

var date = new Date('2010-08-10 00:00:00');
date = date.toLocaleDateString(undefined, {day:'2-digit'}) + '-' + date.toLocaleDateString(undefined, {month:'short'}) + '-' + date.toLocaleDateString(undefined, {year:'numeric'})

สำหรับการสนับสนุนเบราว์เซอร์ดูtoLocaleDateString