Cara memformat tanggal JavaScript

Dalam JavaScript, bagaimana saya bisa memformat objek tanggal untuk dicetak 10-Aug-2010?

Untuk format tanggal terbatas kustom, Anda harus mengeluarkan komponen tanggal (atau waktu) dari DateTimeFormatobjek (yang merupakan bagian dari API Internasionalisasi ECMAScript ), dan kemudian secara manual membuat string dengan pembatas yang Anda inginkan.

Untuk melakukan ini, Anda dapat menggunakan 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

Anda juga bisa mengeluarkan bagian-bagian DateTimeFormatsatu per satu menggunakan DateTimeFormat#format, tetapi perhatikan bahwa ketika menggunakan metode ini, per Maret 2020, ada bug dalam implementasi ECMAScript ketika datang untuk memimpin nol pada menit dan detik (bug ini dielakkan dengan pendekatan di atas).

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

Ketika bekerja dengan tanggal dan waktu, biasanya layak menggunakan perpustakaan (mis. Moment.js , luxon ) karena banyak kompleksitas tersembunyi dari lapangan.

Perhatikan bahwa API Internasionalisasi Script ECMAS, yang digunakan dalam solusi di atas tidak didukung di IE10 ( 0,03% pangsa pasar browser global pada Februari 2020).

Jika Anda perlu sedikit kontrol atas pemformatan daripada jawaban yang saat ini diterima, Date#toLocaleDateStringdapat digunakan untuk membuat rendering khusus lokal standar. The localedan optionsargumen membiarkan aplikasi menentukan bahasa yang format konvensi harus digunakan, dan memungkinkan beberapa kustomisasi rendering.

Contoh kunci opsi:

1. hari:
   Representasi hari itu.
   Nilai yang mungkin adalah "numerik", "2 digit".
2. hari kerja:
   Representasi hari kerja.
   Nilai yang mungkin adalah "sempit", "pendek", "panjang".
3. tahun:
   Representasi tahun.
   Nilai yang mungkin adalah "numerik", "2 digit".
4. bulan:
   Representasi bulan.
   Nilai yang mungkin adalah "numerik", "2 digit", "sempit", "pendek", "panjang".
5. jam:
   Representasi jam.
   Nilai yang mungkin adalah "numerik", "2 digit".
6. menit: Representasi menit.
   Nilai yang mungkin adalah "numerik", "2 digit".
7. kedua:
   Representasi yang kedua.
   Nilai yang mungkin adalah "numerik", 2 digit ".

Semua kunci ini opsional. Anda dapat mengubah jumlah nilai opsi berdasarkan kebutuhan Anda, dan ini juga akan mencerminkan keberadaan setiap jangka waktu tanggal.

Catatan: Jika Anda hanya ingin mengonfigurasi opsi konten, tetapi masih menggunakan lokal saat ini, melewati nulluntuk parameter pertama akan menyebabkan kesalahan. Gunakan undefinedsebagai gantinya.

Untuk berbagai bahasa:

1. "en-US": Untuk bahasa Inggris
2. "hi-IN": Untuk bahasa Hindi
3. "ja-JP": Untuk Jepang

Anda dapat menggunakan lebih banyak opsi bahasa.

Sebagai contoh

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

Anda juga dapat menggunakan toLocaleString()metode ini untuk tujuan yang sama. Satu-satunya perbedaan adalah fungsi ini menyediakan waktu ketika Anda tidak melewatkan opsi apa pun.

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

Referensi:

• toLocaleString()

• toLocaleDateString()

Gunakan perpustakaan date.format :

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

pengembalian:

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

format tanggal pada npm

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

Jika Anda perlu cepat memformat tanggal menggunakan plain JavaScript, penggunaan getDate, getMonth + 1, getFullYear, getHoursdan getMinutes:

var d = new Date();

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

// 16-5-2015 9:50

Atau, jika Anda perlu diisi dengan nol:

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

Yah, yang saya inginkan adalah mengubah tanggal hari ini menjadi string tanggal yang ramah MySQL seperti 2012-06-23, dan menggunakan string itu sebagai parameter di salah satu pertanyaan saya. Solusi sederhana yang saya temukan adalah ini:

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

Perlu diingat bahwa solusi di atas tidak tidak memperhitungkan zona waktu Anda offset.

Anda dapat mempertimbangkan menggunakan fungsi ini sebagai gantinya:

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

Ini akan memberi Anda tanggal yang benar jika Anda mengeksekusi kode ini sekitar awal / akhir hari.

• Contoh: http://jsfiddle.net/simo/sapuhzmm/
• Date.toISOString
• Date.toJSON
• String.slice

Fungsi pemformatan khusus:

Untuk format tetap, fungsi sederhana membuat pekerjaan. Contoh berikut menghasilkan format internasional 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

Format OP dapat dihasilkan seperti:

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

Catatan: Namun, biasanya bukan ide yang baik untuk memperluas pustaka standar JavaScript (misalnya dengan menambahkan fungsi ini ke prototipe Tanggal).

Fungsi yang lebih maju dapat menghasilkan output yang dapat dikonfigurasi berdasarkan parameter format.

Jika menulis fungsi pemformatan terlalu panjang, ada banyak pustaka yang dapat melakukannya. Beberapa jawaban lain sudah menyebutkannya. Tetapi meningkatnya ketergantungan juga menjadikannya bagian-lawan.

Fungsi pemformatan ECMAScript standar:

Karena versi ECMAScript yang lebih baru, Datekelas memiliki beberapa fungsi pemformatan khusus:

toDateString : Ketergantungan implementasi, hanya tampilkan tanggal.

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 : Tampilkan tanggal dan waktu 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 untuk 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 : Ketergantungan implementasi, tanggal dalam format lokal.

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

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

toLocaleString : Ketergantungan implementasi, tanggal & waktu dalam format lokal.

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 : Ketergantungan implementasi, waktu dalam format lokal.

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 Umum untuk Tanggal.

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

Catatan: dimungkinkan untuk menghasilkan output khusus dari format tersebut>

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

Cuplikan contoh:

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

Jika Anda sudah menggunakan jQuery UI di proyek Anda, Anda bisa melakukannya dengan cara ini:

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

// formatted will be 'Jul 8, 2014'

Beberapa opsi format tanggal datepicker untuk bermain dengan tersedia di sini .

Saya pikir Anda bisa menggunakan metode Tanggal yang tidak standartoLocaleFormat(formatString)

formatString: String format dalam format yang sama yang diharapkan oleh strftime()fungsi dalam C.

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

Referensi:

• Tolocaleformat
• strftime

JavaScript polos adalah pilihan terbaik untuk pencetus kecil.

Di sisi lain, jika Anda membutuhkan lebih banyak barang kencan, MomentJS adalah solusi yang bagus.

Sebagai contoh:

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

Di browser modern (*) , Anda bisa melakukan ini:

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

Output jika dieksekusi hari ini (24 Januari, 2016):

'24-Jan-2016'

(*) Menurut MDN , "browser modern" berarti Chrome 24+, Firefox 29+, Internet Explorer 11, Edge 12+, Opera 15+ & Safari nightly build .

Anda harus melihat di date.js . Ini menambahkan banyak pembantu yang nyaman untuk bekerja dengan tanggal, misalnya, dalam kasus Anda:

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

Persiapan: http://www.datejs.com/2007/11/27/getting-started-with-datejs/

Saya bisa mendapatkan format yang Anda minta dalam satu baris tanpa perpustakaan dan tanpa metode Tanggal, cukup 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()')

Dalam pengujian saya, ini bekerja dengan andal di browser utama (Chrome, Safari, Firefox, dan IE.) Seperti yang ditunjukkan @RobG, output Date.prototype.toString () bergantung pada implementasi, jadi cukup uji output untuk memastikan ini berfungsi tepat di mesin JavaScript Anda. Anda bahkan dapat menambahkan beberapa kode untuk menguji output string dan pastikan itu cocok dengan apa yang Anda harapkan sebelum Anda melakukan penggantian regex.

@ Sébastien - alternatif semua dukungan browser

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

Dokumentasi: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

OK , kami mendapatkan sesuatu yang disebut Intl yang sangat berguna untuk memformat tanggal di JavaScript hari ini:

Tanggal Anda seperti di bawah ini:

var date = '10/8/2010';

Dan Anda berubah menjadi Tanggal dengan menggunakan Date baru () seperti di bawah ini:

date = new Date(date);

Dan sekarang Anda dapat memformatnya sesuka Anda menggunakan daftar lokal seperti di bawah ini:

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: "٨‏/١٠‏/٢٠١٠"

Jika Anda benar-benar menginginkan format yang Anda sebutkan di atas, Anda dapat melakukannya:

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

Dan hasilnya adalah:

"10-Aug-2010"

Untuk lebih lanjut, lihat API Intl dan dokumentasi Intl.DateTimeFormat .

Menggunakan template string ECMAScript Edition 6 (ES6 / ES2015):

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

Jika Anda perlu mengubah pembatas:

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

Solusi Terpaket : Luxon

Jika Anda ingin menggunakan satu solusi untuk semua, saya sangat merekomendasikan menggunakan Luxon (versi modern dari Moment.js ) yang juga memformat di banyak bahasa / bahasa dan banyak fitur lainnya.

Luxon di-host di situs web Moment.js dan dikembangkan oleh pengembang Moment.js karena Moment.js memiliki keterbatasan yang ingin ditangani oleh pengembang tetapi tidak bisa.

Untuk memasang:

npm install luxonatau yarn add luxon(tautan kunjungi untuk metode pemasangan lainnya)

Contoh:

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

Hasil:

10-Agu-2010

Solusi Manual

Dengan menggunakan format yang sama seperti Moment.js, Class DateTimeFormatter (Java) , dan Class SimpleDateFormat (Java) , saya menerapkan solusi komprehensif di formatDate(date, patternStr)mana kode mudah dibaca dan dimodifikasi. Anda dapat menampilkan tanggal, waktu, AM / PM, dll. Lihat kode untuk contoh lebih lanjut.

Contoh:

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

( formatDatediterapkan dalam cuplikan kode di bawah)

Hasil:

Jumat, 12 Oktober 2018 18: 11: 23: 445

Coba kode dengan mengklik "Jalankan cuplikan kode."

Pola Tanggal dan Waktu

yy= 2 digit tahun; yyyy= setahun penuh

M= digit bulan; MM= 2 digit bulan; MMM= nama bulan pendek; MMMM= nama bulan penuh

EEEE= nama hari kerja penuh; EEE= nama hari kerja pendek

d= hari digit; dd= 2 digit hari

h= jam pagi / malam; hh= 2 digit jam pagi / malam; H= jam; HH= 2 digit jam

m= menit; mm= 2 digit menit; aaa= Pagi / sore

s= detik; ss= 2 digit detik

S = milidetik

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

Terima kasih @Gerry telah membesarkan Luxon.

Berikut adalah beberapa kode yang baru saja saya tulis untuk menangani format tanggal untuk proyek yang sedang saya kerjakan. Ini meniru fungsi format tanggal PHP yang sesuai dengan kebutuhan saya. Jangan ragu untuk menggunakannya, itu hanya memperpanjang objek Date () yang sudah ada. Ini mungkin bukan solusi yang paling elegan tetapi ini bekerja untuk kebutuhan saya.

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
 * 
 ************************************/

Solusi JavaScript tanpa menggunakan perpustakaan eksternal apa pun:

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"

Dokumentasi lebih lanjut di developer.mozilla.org

Jika Anda menggunakan jQuery UI dalam kode Anda, ada fungsi inbuilt yang disebut formatDate(). Saya menggunakannya dengan cara ini untuk memformat tanggal hari ini:

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

Anda dapat melihat banyak contoh lain dari format tanggal dalam dokumentasi jQuery UI .

Kami memiliki banyak solusi untuk ini, tetapi saya pikir yang terbaik dari mereka adalah Moment.js. Jadi saya pribadi menyarankan untuk menggunakan Moment.js untuk operasi tanggal dan waktu.

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

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

Cara yang berguna dan fleksibel untuk memformat DateTimes dalam JavaScript adalah 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,'-'));

Hasilnya adalah: "12-Oct-2017"

Format tanggal dan waktu dapat dikustomisasi menggunakan argumen opsi.

Itu Intl.DateTimeFormat objek adalah konstruktor untuk objek yang memungkinkan bahasa tanggal sensitif dan format waktu.

Sintaksis

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

Parameter

lokal

Pilihan. Sebuah string dengan tag bahasa BCP 47, atau array dari string tersebut. Untuk bentuk umum dan interpretasi argumen locales, lihat halaman Intl. Kunci ekstensi Unicode berikut diizinkan:

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".

Pilihan

Pilihan. Objek dengan beberapa atau semua properti berikut:

localeMatcher

Algoritma pencocokan lokal untuk digunakan. Nilai yang mungkin adalah "lookup"dan "best fit"; standarnya adalah "best fit". Untuk informasi tentang opsi ini, lihat halaman Intl.

zona waktu

Zona waktu untuk digunakan. Satu-satunya implementasi nilai yang harus dikenali adalah "UTC"; default adalah zona waktu default runtime. Implementasi juga dapat mengenali nama-nama zona waktu dari waktu IANA database zona, seperti "Asia/Shanghai", "Asia/Kolkata","America/New_York" .

jam12

Apakah akan menggunakan waktu 12 jam (dibandingkan dengan waktu 24 jam). Nilai yang mungkin adalah truedan false; standarnya adalah tergantung lokal.

formatMatcher

Algoritma pencocokan format untuk digunakan. Nilai yang mungkin adalah "basic"dan "best fit"; standarnya adalah "best fit". Lihat paragraf berikut untuk informasi tentang penggunaan properti ini.

Properti berikut menjelaskan komponen tanggal-waktu untuk digunakan dalam output yang diformat dan representasi yang diinginkan. Implementasi diperlukan untuk mendukung setidaknya subset berikut:

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

Implementasi dapat mendukung himpunan bagian lainnya, dan permintaan akan dinegosiasikan dengan semua kombinasi subset-representasi yang tersedia untuk menemukan yang paling cocok. Dua algoritma tersedia untuk negosiasi ini dan dipilih oleh properti formatMatcher: "basic"Algoritme yang ditentukan sepenuhnya dan algoritma "cocok paling cocok" tergantung implementasi.

hari kerja

Representasi hari kerja. Nilai yang mungkin adalah "narrow", "short", "long".

zaman

Representasi era. Nilai yang mungkin adalah "narrow", "short", "long".

tahun

Representasi tahun ini. Nilai yang mungkin adalah "numeric", "2-digit".

bulan

Representasi bulan. Nilai yang mungkin adalah "numeric", "2-digit", "narrow", "short", "long".

hari

Representasi hari itu. Nilai yang mungkin adalah "numeric", "2-digit".

jam

Representasi jam. Nilai yang mungkin adalah "numeric", "2-digit".

menit

Representasi menit. Nilai yang mungkin adalah "numeric", "2-digit".

kedua

Representasi yang kedua. Nilai yang mungkin adalah "numeric", "2-digit".

timeZoneName

Representasi nama zona waktu. Nilai yang mungkin adalah "short", "long". Nilai default untuk setiap properti komponen tanggal-waktu tidak ditentukan, tetapi jika semua properti komponen tidak ditentukan, maka tahun, bulan, dan hari diasumsikan menjadi "numeric".

Periksa Daring

Keterangan lebih lanjut

Ini dapat membantu masalah:

var d = new Date();

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

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

Ini adalah bagaimana saya menerapkan plugin npm saya

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 memiliki ekstensi luar biasa untuk objek Date, termasuk format Date.form metode .

Contoh dari dokumentasi:

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

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

Untuk siapa pun yang mencari solusi ES6 yang sangat sederhana untuk menyalin, menempel, dan mengadopsi:

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

Pada 2019, sepertinya Anda bisa mendapatkan toLocaleDateString untuk mengembalikan hanya bagian-bagian tertentu dan kemudian Anda dapat bergabung dengan mereka sesuai keinginan:

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

Anda harus melihat DayJs Ini adalah remake dari momentJs tetapi arsitektur modular yang berorientasi lebih ringan.

Alternatif 2kB cepat untuk Moment.js dengan API modern yang sama

Day.js adalah pustaka JavaScript minimalis yang mem-parsing, memvalidasi, memanipulasi, dan menampilkan tanggal dan waktu untuk peramban modern dengan API yang sebagian besar kompatibel dengan Moment.js. Jika Anda menggunakan Moment.js, Anda sudah tahu cara menggunakan 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>

Untuk mendapatkan "10-Agu-2010", coba:

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

Untuk dukungan browser, lihat toLocaleDateString .