このことは、希望する形式で日付または日付範囲を入力する必要があるフォームに記入する必要がある場合によく見られます。 ユーザーは間違いなく間違いを犯し、間違った形式で日付を入力し、エラーがどこにあるかを把握し、フォームに記入せずに完全に離れます...ここでは、日付の選択を非常に簡単で便利にするために、このUI jQueryが意図されています カレンダー、またはむしろ日付ピッカー...
いつものように、例のデモンストレーションから始めて、それから自宅でそれを使用する方法を見つけます。 左側のテキストフィールドをクリックすると、カレンダーが1つの日付で機能します。 右側には、日付範囲を選択できるカレンダーがあります。
デモ
サンプルのソースコードをダウンロードできます。jQueryライブラリがある場合は、このサンプルをWebサイトで再現してください。
例のソースコードを使用すると、カレンダーの表示を担当するスタイルシートを確認し、必要に応じてデザインに合わせて編集できます。 コードのこの部分は、コメントで強調表示されています/ * jQuery UI Datepickerのスタイル* /。
HTMLコードは興味深いものではありません-これらは単純なテキスト入力フィールドです。 スクリプトがこれらの要素に識別子でアクセスすることを覚えておいてください。
最後に、Datepicker UIを呼び出す非常に簡単なコードを示します。
識別子が#exampleの要素には、1つの日付のみが選択されたシンプルなカレンダーが割り当てられます。 これらはデフォルト設定です。
オプションは#exampleRange要素に設定されます：
rangeSelect ： true-日付範囲を選択する機能を設定するだけです。
yearRange ： '2000： 2010'-カレンダーの日付範囲を設定します。
firstDay ：1-週の最初の日を設定します。1は月曜日です。
一般的に、多くの設定があります。 これには、カレンダーの開始時に選択される開始日、日付選択に許可される最小および最大を設定する機能、さらにオプションを介して母国語で日と月の名前を指定する機能などの設定が含まれます。 完全なリストはここにあります。
しかし、正直なところ、 ui.datepicker.jsファイル自体にいくつかの設定を直接設定する方が適切だと思われました。これは非常に簡単だからです。 さらに、開発者のWebサイトでダウンロードできる元のファイルにはすべての名前が英語で含まれており、ロシア語を使用します。 これは非常に簡単です。 テキストエディタでファイルを開き、Datepicker（）関数の非常に小さな翻訳を作成する必要があります。
これが難しいと思う人は誰でも私の翻訳を使うことができます。 サンプルアーカイブには、翻訳が含まれるファイルdatepicker.translate.jsが含まれています。
| Isst。 |