ui-datepicker で 2 桁の年を選択するにはどうすればよいですか? 24年か79年を選択しようとすると1924年か1979年が返ってきます。
ありがとう。
ui-datepicker で 2 桁の年を選択するにはどうすればよいですか? 24年か79年を選択しようとすると1924年か1979年が返ってきます。
ありがとう。
日付形式の引数を指定します: .datepicker({ dateFormat: 'dd-mm-y' })
(2 桁の yeay = y、必要に応じて残りの形式を調整します)
Datepicker プラグインには、そのような場合のための特定のオプションが 1 つあります - shortYearCutoff :
shortYearCutoff
日付の世紀を決定するためのカットオフ年 (
'y'
dateFormat と組み合わせて使用)。カットオフ年以下の年の値で入力された日付は現在の世紀と見なされ、それより大きい日付は前の世紀と見なされます。
そのデフォルト値は「+10」です (現在から 10 年なので、2012 年に入力された「22」は「2022」に変換されますが、「23」は「1923」になります)。
次のように、datepicker を初期化するときに 99 (最大値) を指定できます。
$( ".selector" ).datepicker({ shortYearCutoff: 99 });
... すべての 2 桁の年を現在の世紀に属するようにします。
この場合、Datepickerはあまり直感的ではありません。
このドキュメントを試してください:
http://api.jqueryui.com/1.8/datepicker/#option-dateFormat
日付形式の年部分をyyではなくyのみに設定します
$(selector).datepicker({ dateFormat: 'dd.mm.y' })
shortYearCutoff オプションを追加しても、ピッカー ウィンドウがボタン (showOn: 'button') でのみアクティブ化され、ユーザーが 2 桁の年を手動で入力し、4 桁の年が必要な場合は何も起こりませんでした。
日付の書式設定を処理するために、独自の変更イベントを入力フィールドに添付することになりました。コード例を以下に示します。
jquery validate が使用され、この入力が存在するフォームで構成されていることにも注意してください。日付ピッカー入力の検証設定は、日付値を適用するように構成されています。datepicker:{date: true} これを「mm/dd/yy」として構成された datepicker の dateFormat 設定と組み合わせると、カスタム onchange イベント コード処理が確実に機能します。
//datepicker
$( "#datepicker" ).attr("placeholder", "mm/dd/yyyy").change(function(){
// get the date value from the input field
var d = $(this).val();
// get the last 4 characters of the date value entered
var last4 = d.substr(-4);
// determine if the last 4 characters contain the character: /
if(last4.indexOf('/') > -1){
// yes there is a / character which means a two digit year was provided
// store the last two digits from the input string
var last2 = ((d.substr(-2))*1);
// remove the last two digits from the input string
d = d.slice(0,(d.length-2));
// prepend a 19 or 20 to the two digit year given based on a cutOff of 30
if(last2<=30){
d = d+'20'+last2;
}else{
d = d+'19'+last2;
}
}
// store/display the properly formated date
d = $.datepicker.parseDate('mm/dd/yy', d);
$(this).datepicker('setDate', d);
}).datepicker({
dateFormat: "mm/dd/yy",
shortYearCutoff: 30,
buttonImage: 'images/calendar_icon.png',
showOn: 'button'
});
Input values | onchange output results
--------------------------------------
07/04/2000 | 07/04/2000 (no change)
7/4/2000 | 07/04/2000
07/04/00 | 07/04/2000
07/4/00 | 07/04/2000
7/4/00 | 07/04/2000
7/4/30 | 07/04/2030
7/4/31 | 07/04/1931
07/04/2031 | 07/04/2031 (no change)
07/04/1931 | 07/04/1931 (no change)
それを日付ピッカーの初期化に入れます
"dateFormat": "yy-mm-dd"