日付のフォーマットに応じて入力欄の大きさを自動変更

jQuery UI の Datepicker プラグインにおいて、カレンダーからテキスト入力欄に入力した日付のフォーマットを、ドロップダウンリストで選択したフォーマットに変更し、フォーマットに応じて、入力欄の大きさを自動的に変更する方法。

実装例（サンプル）

日付:

日付のフォーマット: Default – mm/dd/yy ISO 8601 – yy-mm-dd 年月日 – yy年mm月dd日 年月日 – yy年m月d日 Short – d M, y Medium – d MM, y Full – DD, d MM, yy With text – ‘day’ d ‘of’ MM ‘in the year’ yy

実装例（サンプル）の動作について

「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。

カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。

をクリックすると、次月のカレンダーになる。

をクリックすると、前月のカレンダーになる。

「日付のフォーマット:」のドロップダウンリストから、日付のフォーマットを選択すると、「日付:」の右側の、テキスト入力欄の日付のフォーマットが変わる。

例えば、「年月日 – yy年m月d日」を選択すると、「2011年6月20日」となる。

フォーマットに応じて、入力欄の大きさも自動的に変更する。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

HTML