JavaScriptの日付をフォーマットする方法

2010年08月24日に質問されました。  ·  閲覧回数 4.2M回  ·  ソース

leora picture
2010年08月24日

JavaScriptで、日付オブジェクトを10-Aug-2010として出力するようにフォーマットするにはどうすればよいですか?

回答

ajeet kanojia picture
2015年12月01日
2179

現在受け入れられている回答よりもフォーマットの制御がわずかに少ない必要がある場合は、 Date#toLocaleDateStringを使用して標準のロケール固有のレンダリングを作成できます。 localeおよびoptions引数を使用すると、アプリケーションでフォーマット規則を使用する言語を指定し、レンダリングをカスタマイズできます。

オプションの主な例:

  1. 日:
    その日の表現。
    可能な値は「数値」、「2桁」です。
  2. 平日:
    平日の表現。
    可能な値は「narrow」、「short」、「long」です。
  3. 年:
    年の表現。
    可能な値は「数値」、「2桁」です。
  4. 月:
    月の表現。
    可能な値は、「数値」、「2桁」、「狭い」、「短い」、「長い」です。
  5. 時間:
    時間の表現。
    可能な値は「数値」、「2桁」です。
  6. 分:分の表現。
    可能な値は「数値」、「2桁」です。
  7. 2番目:
    2番目の表現。
    可能な値は「数値」、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

参照:

Marko picture
2010年08月24日
1437

カスタム区切りの日付形式の場合、 DateTimeFormatオブジェクト( ECMAScript Internationalization APIの一部)から日付(または時刻)コンポーネントを引き出してから、必要な区切り文字を使用して文字列を手動で作成する必要があります。 。

これを行うには、 DateTimeFormat#formatToParts使用できます。 配列を分解することもできますが、配列の出力はロケールに依存するため、これは理想的ではありません。

// example 1
const o_date_en = new Intl.DateTimeFormat('en');
const a_date_en = o_date_en.formatToParts();
// example 2
const o_date_hi = new Intl.DateTimeFormat('hi');
const a_date_hi = o_date_hi.formatToParts();
// print
console.log(a_date_en, a_date_hi);

配列をオブジェクトに縮小することをお勧めします。

const o_date = new Intl.DateTimeFormat;
const f_date = (m_ca, m_it) => Object({...m_ca, [m_it.type]: m_it.value});
const m_date = o_date.formatToParts().reduce(f_date, {});
console.log(m_date.day + '-' + m_date.month + '-' + m_date.year);

DateTimeFormat#formatを使用してDateTimeFormat 1つずつ引き出すこともできますが、このメソッドを使用する場合、2020年3月の時点で、ECMAScriptの実装にバグ

const d = new Date(2010, 7, 5);
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.jsluxonなど)を使用する価値があります。

上記のソリューションで使用されているECMAScriptInternationalization APIは、 IE10ではサポートさ0.03% )。

RobertPitt picture
2010年08月24日
618

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のdateformat

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

sebastian.i picture
2015年05月16日
565

プレーンJavaScriptを使用して日付をすばやくフォーマットする必要がある場合は、 getDategetMonth + 1getFullYeargetHours 、および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
simo picture
2012年06月24日
440

さて、私が欲しかったのは、今日の日付を2012-06-23のようなMySQLに適した日付文字列に変換し、その文字列をクエリの1つでパラメータとして使用することでした。 私が見つけた簡単な解決策はこれです:

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

これにより、1日の始まり/終わり頃にこのコードを実行している場合に、正しい日付が得られます。

Adrian Maire picture
2017年04月12日
243

カスタムフォーマット機能:

固定フォーマットの場合、単純な関数がその役割を果たします。 次の例では、国際形式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

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 :JSONのStringifier。

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));
Dmitry Pavlov picture
2014年07月09日
179

プロジェクトですでにjQueryUIを使用している場合は、次の方法で使用できます。

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

// formatted will be 'Jul 8, 2014'

いくつかの日付ピッカーの日付形式オプションは、ここで利用でき

S&#233;bastien picture
2011年12月30日
139

非標準のDateメソッドtoLocaleFormat(formatString)使用できると思います

formatString: Cのstrftime()関数で期待されるのと同じ形式のフォーマット文字列。

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

参照:

Mite Mitreski picture
2014年12月24日
110

プレーン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
John Slegers picture
2016年01月25日
100

最新のブラウザ(*)では、次のようにすることができます。

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

今日実行された場合の出力(2016年1月24日):

'24-Jan-2016'

(*) MDNナイトリービルドを意味します。