jqueryで日付を文字列に変換する方法

フロントエンド開発では、日付処理が一般的な問題です。 jQuery を使用して開発する場合、日付を文字列に変換することも一般的な要件です。この記事では、jQuery datepicker プラグインを導入して日付を文字列に変換する方法を説明します。

1. jQuery datepicker

jQuery datepicker は、jQuery UI のスタイルを使用し、日付選択のためのインタラクティブな機能を提供する日付ピッカー プラグインです。 jQuery datepicker プラグインを使用すると、日付を簡単に選択して文字列にフォーマットできます。

1. jQuery datepicker のインストール

まず、jQuery と jQuery UI のライブラリ ファイル、および jQuery datepicker のライブラリ ファイルを HTML ページに導入する必要があります。対応するライブラリファイルは、jQuery公式サイト(https://jquery.com/)およびjQuery UI公式サイト(https://jqueryui.com/)からダウンロードできます。または、CDN を使用してロードします。

9d3740fcc05c71934a3843dc16e63d2c2cacc6d41bbb37262a98f745aa00fbf0
35f7e821dc43bffb0ee95091a510a1e72cacc6d41bbb37262a98f745aa00fbf0
26506cee0e045ab2e0514f675d5ac881
c6f9f990b826ff3923888897c04585eb2cacc6d41bbb37262a98f745aa00fbf0
e6bbd5e89ee7e297ced329a66f1399e2

2. jQuery datepicker を使用する

jQuery datepicker を使用するには、クラスを追加するだけです。を日付入力ボックスに入力し、JavaScript で datepicker 関数を呼び出します。

HTML コード:

dce39bab25e8c23ccacfef3c0853299c

JavaScript コード:

$(ドキュメント)。 ready(function(){

$(".datepicker").datepicker();

});

このようにして、日付入力ボックスをクリックして日付ピッカーをポップアップ表示できます。

2. 日付を文字列に変換する

日付を文字列に変換するには、主に日付の取得と文字列へのフォーマットという 2 つのプロセスが必要です。

1. 日付の取得

jQuery datepicker を使用すると、関数を通じて日付を取得できます。たとえば、日付ピッカーがポップアップしたときにデフォルトの日付を取得するには、次のようにします。

$(".datepicker").datepicker("getDate")

この関数は、JavaScript の日付型オブジェクトを返します。

2. 文字列への書式設定

JavaScript を使用した Date 型には、toDateString()、toLocaleDateString() などのいくつかの日付書式設定メソッドが付属しています。ただし、これらの方法の欠点は、形式をカスタマイズできないことです。

日付を便利にフォーマットするには、非常に便利な日付処理方法を提供するサードパーティ ライブラリ moment.js (https://momentjs.com/) を使用できます。

たとえば、日付を yyyy-mm-dd の形式にフォーマットしたい場合は、moment.js の format() メソッドを使用できます。

moment(date).format("YYYY-MM-DD")

このうち、date は JavaScript の Date 型オブジェクトで、書式設定する日付を表します。 format() メソッドのパラメータは、出力形式を指定するために使用される文字列です。 YYYY は 4 桁の年、MM は月、DD は日数を表します。

完全なコードは次のとおりです:

HTML コード:

dce39bab25e8c23ccacfef3c0853299c
2b0116e076d612c8689c16be6dcdf719変換65281c5ac262bf6d81768915a4a77ac0
9369b95c0a54fa14078c71ff87b92a5394b3e26ee717c64999d7867364b1b4a3

JavaScript コード:

$(document).ready ( function(){

$(".datepicker").datepicker();
$("#btnConvert").click(function(){
    var date = $(".datepicker").datepicker("getDate");
    var dateString = moment(date).format("YYYY-MM-DD");
    $("#result").text(dateString);
});

});

まず、日付入力ボックスに datepicker クラスを追加します。次に、日付変換プロセスをトリガーするボタンが定義されます。ボタンをクリックすると、getUserDate() 関数が日付を取得し、moment.js を使用して日付を文字列にフォーマットします。

3. 概要

jQuery datepicker プラグインを使用すると、日付ピッカーをすばやく実装できます。 moment.js を使用すると、日付を文字列に変換し、日付形式をカスタマイズすることが簡単にできます。この記事の説明を通じて、jQuery が日付を文字列に変換する仕組みについて、皆さんもより深く理解できたと思います。

以上がjqueryで日付を文字列に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。