Diğerleri gibi, bunu yapmaya çalışırken çok sayıda sorunla karşılaştım ve sadece gönderilen çözümlerin bir kombinasyonu ve sonunda mükemmel hale getirmek için büyük bir hack bana bir çözüm .
Bu konuyu denedim diğer çözümler ile ilgili sorunlar:
- Bir tarih seçicide yeni bir tarih seçmek, diğer tarih seçicilerin (dahili) tarihlerini de değiştirir, böylece diğerlerini tekrar açtığınızda (veya tarihlerini almaya çalıştığınızda), atanan girdilerinde görüntülenen tarihten farklı bir tarihe sahip olurlar -alan.
- Tarih seçici tekrar açıldığında tarihi "hatırlamaz".
- Tüm biçimlerle uyumlu olmaması için alt dize kullanmanın tarihlerini hokkabazlık kodu.
- "Aylık seçicim", giriş alanını yalnızca değer değiştirildiği zaman değil, kapatıldığında değiştirdi.
- Bir tarih için yanlış biçimlendirilmiş bir giriş dizesi yazarsanız ve ardından tarih seçicide 'Kapat'ı tıklarsanız, giriş alanı doğru şekilde güncelleştirilmez.
- Günleri gösteren normal datepickers'larım, günleri göstermeyen monthpickers'larla aynı sayfada olamaz.
Sonunda tüm bu sorunları çözmenin bir yolunu buldum . İlk dördü, tarih ve ay seçicilerinize dahili kodlarında nasıl referans verdiğinize dikkat ederek ve elbette seçicilerinizin manuel olarak güncellenmesini sağlayarak düzeltilebilir. Bu, tabanın yakınındaki örnekleme örneklerinde görebilirsiniz. Beşinci soruna, tarih seçici işlevlerine bazı özel kodlar ekleyerek yardımcı olabilirsiniz.
NOT: Normal tarih seçicinizdeki ilk üç sorunu gidermek için aşağıdaki ay seçici komut dosyalarını kullanmanız GEREKMEZ. Bu yayının altına yakın bir tarih seçici örnekleme komut dosyası kullanmanız yeterlidir.
Şimdi, monthpickers'ı kullanmak ve son sorunu düzeltmek için, datepickers'ları ve monthpickers'ları ayırmamız gerekir. Birkaç jQuery-UI ay seçici eklentisinden birini alabiliriz, ancak bazılarında yerelleştirme esnekliği / yeteneği yok, bazıları animasyon desteği yok ... yani ne yapmalı? Datepicker kodundan "kendi" atın! Bu, tarih görüntüleyicinin tüm işlevleriyle günleri göstermeden tam olarak çalışan bir ay seçici sağlar.
Bir monthpicker js-script ve beraberindeki CSS-script sağladımJQuery-UI v1.11.1 kodu ile, aşağıda açıklanan yöntemi kullanarak, sağladı. Bu kod parçacıklarını sırasıyla monthpicker.js ve monthpicker.css adlı iki yeni dosyaya kopyalamanız yeterlidir.
Tarih seçiciyi bir ay seçiciye dönüştürdüğüm oldukça basit işlemi okumak istiyorsanız, son bölüme ilerleyin.
Şimdi tarihe ve ay seçicilerini sayfaya eklemek için!
Aşağıdaki javascript kod parçacıkları , yukarıda belirtilen sorunlar olmadan sayfada birden çok tarih ve / veya ay seçici ile çalışır! Genellikle '$ (this)' kullanılarak düzeltildi. çok :)
İlk kod normal bir tarih seçici, ikincisi ise "yeni" ay seçici içindir.
Dışarı yorumladı. SonraGirdi alanını temizlemek için bir öğe oluşturmanıza izin veren , Paul Richards'ın cevabından çalındı.
Benim ay seçici "MM yy" biçimini ve benim tarih seçici 'yy-aa-gg' biçimini kullanıyorum, ama bu tüm biçimlerle tamamen uyumlu , bu yüzden istediğinizi kullanmakta özgürsünüz. 'DateFormat' seçeneğini değiştirmeniz yeterlidir. 'ShowButtonPanel', 'showAnim' ve 'yearRange' standart seçenekleri elbette isteğe bağlıdır ve isteklerinize göre özelleştirilebilir.
Tarih seçici ekleme
Datepicker örneklemesi.
Bu 90 yıl önce ve günümüze kadar gidiyor. Özellikle defaultDate, minDate ve maxDate seçeneklerini ayarlarsanız giriş alanını doğru tutmanıza yardımcı olur, ancak bunu yapmazsanız işleyebilir. Seçtiğiniz herhangi bir tarihle çalışacaktır.
$('#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('');
// })
//)
;
Bir ay seçici ekleme
Monthpicker.js dosyasını ve monthpicker.css dosyasını monthpickers'ı kullanmak istediğiniz sayfaya ekleyin.
Ay seçici örneği
Bu ay seçiciden alınan değer, her zaman seçilen ayın İLK günüdür. İçinde bulunulan ayda başlar ve 100 yıl ile 10 yıl arasında değişebilir.
$('#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('');
// })
//)
;
Bu kadar!
Bir ay seçici yapmak için ihtiyacınız olan tek şey bu.
Bir jsfiddle bununla çalışmak gibi görünmüyor, ama benim için ASP.NET MVC projemde çalışıyor. Sayfanıza bir tarih seçici eklemek için normalde yaptığınız şeyi yapın ve muhtemelen sizin için çalışan bir şeye seçici seçerek (yani $ ("# MyMonthTextBox")) değiştirerek yukarıdaki komut dosyalarını ekleyin.
Umarım bu birine yardımcı olur.
Bazı ekstra tarih ve ay seçici kurulumları için pastebine bağlantılar:
Monthpicker ayın son günü çalışıyor . Bu ay seçiciden aldığınız tarih her zaman ayın son günü olacaktır.
İşbirliği içinde olan iki ay seçici ; 'start' ayın ilk günü, 'end' ayın son günü çalışıyor. Her ikisi de birbirleri tarafından kısıtlanır, bu nedenle 'başlangıçta seçilen aydan önce olan' bitiş 'üzerinde bir ay seçilmesi,' başlangıç'ı 'bitiş' ile aynı ay olacak şekilde değiştirir. Ve tam tersi. İSTEĞE BAĞLI: 'Başlangıç' için bir ay seçerken, 'bitiş' üzerindeki 'minDate' o aya ayarlanır. Bu özelliği kaldırmak için onClose'da bir satırı yorumlayın (yorumları okuyun).
İşbirliğine dayalı iki tarih seçici ; Her ikisi de birbirleri tarafından kısıtlanır, bu nedenle 'başlangıç' üzerinde seçilen tarihten önce olan 'bitiş' tarihini seçmek, 'başlangıç' öğesini 'bitiş' ile aynı ay olacak şekilde değiştirir. Ve tam tersi. İSTEĞE BAĞLI: 'Başlangıç' üzerinde bir tarih seçerken, 'bitiş' üzerindeki 'minDate' o tarihe ayarlanır. Bu özelliği kaldırmak için onClose'da bir satırı yorumlayın (yorumları okuyun).
DatePicker'ı MonthPicker olarak nasıl değiştirdim?
Ben jpery-ui-1.11.1.js onların tarih seçici ile ilgili tüm javascript kodunu aldım, yeni bir js dosyasına yapıştırdı ve aşağıdaki dizeleri değiştirdim:
- "datepicker" ==> "ay seçici"
- "Datepicker" ==> "Ayırıcı"
- "tarih seçici" ==> "ay seçici"
- "Tarih seçici" ==> "Ay seçici"
Sonra for-loop'un tüm ui-datepicker-calendar div (diğer çözümlerin CSS kullanarak gizlediği div) bölümünü oluşturan kısmını kaldırdım. Bu, _generateHTML: function (inst) içinde bulunabilir.
Şu satırı bulun:
"</div><table class='ui-datepicker-calendar'><thead>" +
Div etiketinden sonra ve söylediği satıra ( dahil değil ) kadar her şeyi işaretleyin :
drawMonth++;
Şimdi mutsuz olacak çünkü bazı şeyleri kapatmamız gerekiyor. Div etiketini daha önce kapattıktan sonra şunu ekleyin:
";
Kod şimdi güzel bir şekilde birleştirilmelidir. Sonunda ne yapmanız gerektiğini gösteren bir kod pasajı:
...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...
Sonra jpery-ui.css gelen datepickers ile ilgili kodu kopyalayıp yeni bir CSS dosyasına yapıştırdım ve aşağıdaki dizeleri değiştirdim:
- "datepicker" ==> "ay seçici"
