サンプル(1)
各入力フィールドをクリックすると、フキダシ型のデートピッカーが表示されます。表示は今日になっています。月日は、今日の日付から近い場合は左右をクリック、遠い場合は月と日のそれぞれの部分をクリックして表示される一覧から選びます。年は、デフォルトで1970年から2015年(現在)の範囲になっていて、左右で1年単位、下の四角が10年単位の移動になっています。日付が決まったところで、下側のチェック部分をクリックすると、入力フィールドに入力されます。日付の表示形式は初期では「3/31/2015」のようになっていましたが、外部スクリプトを書き換えて「2015/3/31」のように変更してあります。
年月日:
サンプル(2)
(1)の年度選択の範囲を狭くしたものです。この範囲などはhtml内のスクリプトで変更可能です。このサンプルでは、2014年から2018年の範囲にしています。範囲が10年を越えないため、10年単位の移動用四角は現れず、1年単位の左右のみになります。また、日付の表示形式は「2015-3-31」のように変更しました。
年月日(年度制限):
サンプル(3)
年のみと月のみの入力になります。
年
月
サンプル(4)
html内にスクリプトを既述して、日付の表示形式だけでなく、その他の見た目や動きをカスタマイズできます。
カスタマイズ:
//カスタマイズ
$( "#input2" ).dateDropper({
format: "Y.m.d",
textColor:"mediumvioletred",
bgColor:"#ffffee",
borderColor:"purple",
animation:"dropdown",
borderRadius:"24"
});
月、曜日の表記は各国版が外部スクリプトの中に用意されていますが、日本語版はありません。日本語表記を使いたい場合は、スクリプトに追加する必要があります。