他の多くの人と同じように、私はこれを実行しようとする多くの問題に遭遇しました、そして投稿されたソリューションの組み合わせ、そして結局それを完璧にするための大きなハックが私にソリューションをもたらしました。
私が試したこのスレッドの他のソリューションの問題：
- 日付ピッカーで新しい日付を選択すると、他の日付ピッカーの（内部）日付も変更されるため、他の日付ピッカーを再度開いた（または日付を取得しようとした）場合、割り当てられた入力に表示されている日付とは異なる日付になります-フィールド。
- 日付ピッカーは、再度開いたときに日付を「記憶」しません。
- 日付を調整するコードは部分文字列を使用したため、すべての形式と互換性がありませんでした。
- 「My monthpicker」は、値が変更されるたびではなく、入力フィールドを閉じるときにのみ変更しました。
- 日付の形式が正しくない入力文字列を入力し、日付ピッカーの[閉じる]をクリックすると、入力フィールドが正しく更新されません。
- 日を表示しない月ピッカーと同じページに、日を表示する通常の日付ピッカーを配置できません。
これらの問題をすべて解決する方法がようやく見つかりました。最初の4つは、内部コードで日付ピッカーと月ピッカーを参照する方法に注意し、ピッカーを手動で更新するだけで修正できます。これは、下部のインスタンス化の例で確認できます。5番目の問題は、datepicker関数にカスタムコードを追加することで解決できます。
注：通常の日付ピッカーの最初の3つの問題を修正するために、次の月ピッカースクリプトを使用する必要はありません。この投稿の下部にある日付ピッカーのインスタンス化スクリプトを使用するだけです。
ここで、monthpickerを使用して最後の問題を修正するには、datepickerとmonthpickerを分離する必要があります。数少ないjQuery-UIの月間ピッカーアドオンの1つを入手できますが、ローカリゼーションの柔軟性や機能に欠けているもの、アニメーションのサポートに欠けているものがあります。日付ピッカーコードから「自分」を転がそう！これにより、日を表示することなく、日付ピッカーのすべての機能を備えた完全に機能する月ピッカーが得られます。
以下で説明する方法を使用して、jQuery-UI v1.11.1コードで、monthpicker js-scriptとそれに付随するCSS-scriptを提供しました。これらのコードスニペットをそれぞれ2つの新しいファイル、monthpicker.jsとmonthpicker.cssにコピーするだけです。
日付ピッカーを月ピッカーに変換するというかなり単純なプロセスについてお読みになりたい場合は、最後のセクションまでスクロールしてください。
次に、日付ピッカーと月ピッカーをページに追加します。
以下のjavascriptコードスニペットは、ページ上の複数の日付ピッカーまたは月ピッカー、あるいはその両方で動作し、前述の問題はありません。通常、「$（this）」を使用して修正されました。たくさん ：）
最初のスクリプトは通常の日付ピッカー用で、2番目のスクリプトは「新しい」月ピッカー用です。
入力フィールドをクリアする要素を作成できるコメントアウトされた.afterは、Paul Richardsの答えから盗まれました。
私は月間ピッカーで「MM yy」形式を、日付ピッカーでは「yy-mm-dd」形式を使用していますが、これはすべての形式と完全に互換性があるため、どちらでも自由に使用できます。「dateFormat」オプションを変更するだけです。標準オプション「showButtonPanel」、「showAnim」、および「yearRange」はもちろんオプションであり、希望に合わせてカスタマイズできます。
日付ピッカーを追加する
日付ピッカーのインスタンス化。
これは90年前から現在に至る。特にdefaultDate、minDate、maxDateオプションを設定した場合は、入力フィールドを正しく保つのに役立ちますが、そうしなくても処理できます。選択した任意のdateFormatで動作します。
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
月ピッカーを追加する
monthpickersを使用するページに、monthpicker.jsファイルとmonthpicker.cssファイルを含めます。
モンピッカーのインスタンス化
この月ピッカーから取得した値は、常に選択した月の最初の日です。現在の月から始まり、100年前から10年後までの範囲です。
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
それでおしまい！
それだけで、月間ピッカーを作成できます。
私はこれでjsfiddleを動作させることができないようですが、それは私のASP.NET MVCプロジェクトで私のために働いています。日付ピッカーをページに追加するために通常行っていることを行い、上記のスクリプトを組み込んでください。セレクター（$（ "＃MyMonthTextBox"）を意味します）を適切なものに変更することもできます。
これが誰かの役に立つことを願っています。
追加の日付および月ピッカー設定用のペーストビンへのリンク：
モンスピッカーは月の最終日に取り組んでいます。今月のピッカーから取得する日付は、常に月の最終日になります。
2つの共同の月間ピッカー。'start'は月の最初に、 'end'は月の最後に働きます。どちらも互いに制限されているため、「開始」で選択した月の前にある「終了」の月を選択すると、「開始」が「終了」と同じ月に変更されます。およびその逆。オプション：「開始」の月を選択すると、「終了」の「minDate」がその月に設定されます。この機能を削除するには、onCloseの1行をコメント化します（コメントを読んでください）。
2つの共同日付ピッカー。どちらも互いに制限されているため、「開始」で選択した日付より前の「終了」の日付を選択すると、「開始」が「終了」と同じ月に変更されます。およびその逆。オプション：「開始」の日付を選択すると、「終了」の「minDate」がその日付に設定されます。この機能を削除するには、onCloseの1行をコメント化します（コメントを読んでください）。
DatePickerをMonthPickerに変更する方法
datepickerに関連するjquery-ui-1.11.1.jsからすべてのJavaScriptコードを取得し、新しいjs-fileに貼り付けて、次の文字列を置き換えました。
- "datepicker" ==> "monthpicker"
- "日付ピッカー" ==> "月ピッカー"
- "日付ピッカー" ==> "月ピッカー"
- "日付ピッカー" ==> "月ピッカー"
次に、ui-datepicker-calendar div（他のソリューションがCSSを使用して非表示にするdiv）全体を作成するforループの一部を削除しました。これは、_generateHTML：関数（inst）にあります。
次のような行を見つけます。
"</div><table class='ui-datepicker-calendar'><thead>" +
divの終了タグの後から、それが言う行まで（含まないで）、すべてをマークします。
drawMonth++;
何かを閉じる必要があるので、今は不幸になります。以前のdiv-tagを閉じた後、これを追加します。
";
これでコードがうまく継ぎ合わされます。これは、最終的に何をすべきかを示すコードスニペットです。
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
次に、datepickersに関連するコードをjquery-ui.cssから新しいCSSファイルにコピーして貼り付け、次の文字列を置き換えました。
- "datepicker" ==> "monthpicker"
