jQuery интерфейса управления datepicker, чтобы показать месяц год только
27 ответов
вот Хак (обновляется с целым .html файл):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
редактировать для приведенного выше примера jsfiddle : http://jsfiddle.net/DBpJe/7755/
Изменить 2 Добавляет значение месяца года в поле ввода только при нажатии кнопки Готово. Также позволяет удалять значения входных полей, что невозможно в приведенном выше поле http://jsfiddle.net/DBpJe/5103/
правка 3
обновлено лучшее решение на основе решение rexwolf вниз.
http://jsfiddle.net/DBpJe/5106
этой код работает безупречно для меня:
<script type="text/javascript">
$(document).ready(function()
{
$(".monthPicker").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
}
});
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
</script>
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
вывод:
@Ben Koehler, что префект! Я сделал незначительную модификацию, так что использование одного экземпляра выбора даты несколько раз работает так, как ожидалось. Без этого изменения дата анализируется неправильно и ранее выбранная дата не выделяется.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
приведенные выше ответы довольно хороши. Моя единственная жалоба заключается в том, что вы не можете очистить значение после его установки. Также я предпочитаю подход extend-jquery-like-a-plugin.
это работает идеально подходит для меня:
$.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: ""
}, options);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
$('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
}
$(this).datepicker(options).focus(hideDaysFromCalendar);
}
затем вызовите так:
$('input.monthYearPicker').monthYearPicker();
<style>
.ui-datepicker table{
display: none;
}
<script type="text/javascript">
$(function() {
$( "#manad" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
actDate = datestr.split('-');
year = actDate[0];
month = actDate[1]-1;
$(this).datepicker('option', 'defaultDate', new Date(year, month));
$(this).datepicker('setDate', new Date(year, month));
}
}
});
});
это решит проблему =) но я хотел timeFormat гггг-мм
только пробовал в FF4, хотя
У меня была эта же потребность сегодня и нашел это на github, работает с jQueryUI и имеет месяц выбора вместо дней в календаре
вот что я придумал. Он скрывает календарь без необходимости дополнительного блока стиля и добавляет кнопку Очистить, чтобы справиться с проблемой невозможности очистить значение после нажатия на вход. Также отлично работает с несколькими monthpickers на одной странице.
HTML-код:
<input type='text' class='monthpicker'>
JavaScript:
$(".monthpicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm",
showButtonPanel: true,
currentText: "This Month",
onChangeMonthYear: function (year, month, inst) {
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
},
onClose: function(dateText, inst) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
}).after(
$("<a href='javascript: void(0);'>clear</a>").click(function() {
$(this).prev().val('');
})
);
мне нужен был выбор месяца / года для двух полей (От & До), и когда один был выбран, макс/мин был установлен на другом...a la сбор даты билетов на самолет. У меня были проблемы с настройкой max и min...даты другого поля будут стерты. Благодаря нескольким из вышеперечисленных постов...Наконец-то я понял. Вы должны установить параметры и даты в очень определенном порядке.
см. эту скрипку для полного решения:Подборщик Месяца/Года @ JSFiddle
код:
var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtFrom").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
var to = $("#txtTo").val();
$("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
if (to.length > 0) {
var toyear = to.substring(to.length - 4, to.length);
var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
$("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
}
}
});
$("#txtTo").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtTo").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
var from = $("#txtFrom").val();
$("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
if (from.length > 0) {
var fryear = from.substring(from.length - 4, from.length);
var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
$("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
}
}
});
также добавьте это в блок стиля, как указано выше:
.ui-datepicker-calendar { display: none !important; }
Я объединил многие из вышеперечисленных хороших ответов и пришел на это:
$('#payCardExpireDate').datepicker(
{
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
это доказано работает, но сталкивается со многими ошибками, поэтому я был вынужден исправлять в нескольких местах datepicker:
if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
$(".ui-datepicker-calendar").hide();
}
patch1: в _showDatepicker: чтобы сгладить шкуру;
patch2: in _checkOffset: чтобы исправить расположение выбора месяца (в противном случае, когда поле находится в нижней части браузера, флажок смещения выключен);
patch3: в onClose _hideDatepicker: в противном случае при закрытии поля даты будут мигать в течение очень короткого периода, что очень раздражает.
Я знаю, что мое исправление было далеко не хорошо, но сейчас оно работает. Надеюсь, это поможет.
это только я или это не работает так, как должно быть в IE(8)? Дата изменяется при нажатии кнопки Готово, но datepicker открывается снова, пока вы не нажмете где-нибудь на странице, чтобы потерять фокус на поле ввода...
Я ищу решение этого.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Если вы ищете месяц выбора попробуйте это С помощью jQuery.МТЗ.monthpicker
Это сработало для меня хорошо.
Waht о: http://www.mattkruse.com/javascript/calendarpopup/
Выберите месяц-выберите пример
после копать jQueryUI.com для datepicker, вот мой вывод и ответ на ваш вопрос.
во-первых, я бы сказал нет на ваш вопрос. Вы не можете использовать jQueryUI datepicker только для выбора месяца и года. Он не поддерживается. Для этого у него нет функции обратного вызова.
но вы можете взломать его, чтобы дисплей только месяц и год, используя css, чтобы скрыть дни и т. д. И я думаю, что это не имеет смысла, потому что тебе нужно ... даты, которые нужно щелкнуть, чтобы выбрать дату.
Я могу сказать, что вам просто нужно использовать другой datepicker. Вроде того, что предложил Роджер.
У меня была проблема выбора даты, смешанного с выбором месяца. Я решил это так.
$('.monthpicker').focus(function()
{
$(".ui-datepicker-calendar").show();
}).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM/yy',
create: function (input, inst) {
},
onClose: function(dateText, inst) {
var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
}
});
если кто-то хочет, чтобы также для нескольких календарей не очень сложно добавить эту функциональность в jQuery ui. с уменьшенным поиском:
x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(
добавьте это перед x
var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}
искать
<table class="ui-datepicker-calendar
и заменить
<table class="ui-datepicker-calendar'+accl+'
искать
this._defaults={
заменить
this._defaults={justMonth:false,
для CSS, вы должны использовать:
.ui-datepicker table.ui-datepicker-just_month{
display: none;
}
после этого все сделано, просто перейдите к желаемому datepicker init функции и обеспечивают настройку var
$('#txt_month_chart_view').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
justMonth: true,
create: function(input, inst) {
$(".ui-datepicker table").addClass("badbad");
},
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
justMonth: true
здесь ключевое :)
сделал пару уточнений к почти идеальному ответу Брайана выше:
Я регексировал значение, установленное на шоу, потому что я думаю, что это действительно делает его немного более читаемым в этом случае (хотя обратите внимание, что я использую немного другой формат)
мой клиент не хотел календаря, поэтому я добавил добавление класса on show / hide, чтобы сделать это, не затрагивая никаких других datepickers. Удаление класса происходит по таймеру, чтобы избежать таблица мигает, когда datepicker исчезает, что кажется очень заметным в IE.
EDIT: одна из проблем, оставшихся для решения, заключается в том, что нет способа очистить datepicker - очистите поле и нажмите, и оно снова заполнится выбранной датой.
EDIT2: мне не удалось решить это красиво (т. е. без добавления отдельной кнопки очистки рядом с входом), поэтому в конечном итоге просто использовать это: https://github.com/thebrowser/jquery.ui.monthpicker - если кто-то может получить стандартный пользовательский интерфейс, чтобы сделать это, это было бы удивительно.
$('.typeof__monthpicker').datepicker({
dateFormat: 'mm/yy',
showButtonPanel:true,
beforeShow:
function(input, dpicker)
{
if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
{
var d = new Date(RegExp., parseInt(RegExp., 10) - 1, 1);
$(this).datepicker('option', 'defaultDate', d);
$(this).datepicker('setDate', d);
}
$('#ui-datepicker-div').addClass('month_only');
},
onClose:
function(dt, dpicker)
{
setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);
var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(y, m, 1));
}
});
вам также нужно это правило стиля:
#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}
как и многие другие, я столкнулся с многочисленными проблемами, пытаясь сделать это, и только сочетание решений, опубликованных, и в конечном итоге большой хак, чтобы сделать его идеальным, имеет приземлился мне решение.
проблемы с другими решениями в этом потоке, которые я пробовал:
- выбор новой даты в datepicker также изменит (внутреннюю) дату других datepickers, поэтому, когда вы снова откроете другие (или попытаетесь получить их дату), они будет иметь другую дату, чем та, которая отображается в назначенном поле ввода.
- datepicker не будет "помнить" дату при открытии снова.
- код для жонглирования датами использовал подстроку, поэтому он не был совместим со всеми форматами.
- "мой monthpicker" изменил только поле ввода при его закрытии, а не всякий раз, когда значения были изменены.
- поле ввода не обновляется правильно, если вы вводите неправильно отформатированный ввод-строка для даты, а затем нажмите кнопку "Закрыть" на datepicker.
- Я не могу иметь обычные datepickers, которые показывают дни, на той же странице, что и monthpickers, которые не показывают дни.
я наконец-то нашел способ исправить все эти проблемы. Первые четыре можно исправить, просто будучи осторожным о том, как вы ссылаетесь на дату и monthpickers в своем внутреннем коде, и, конечно, делать некоторые ручные обновления ваших сборщиков. Это вы можете см. в разделе instantiation-примеры внизу. Пятая проблема может быть решена путем добавления пользовательского кода в функции datepicker.
Примечание: вам не нужно использовать следующие сценарии monthpicker, чтобы исправить первые три проблемы в вашем обычном datepicker. Просто используйте экземпляр datepicker-скрипт в нижней части этого сообщения.
теперь, чтобы использовать monthpickers и исправить последнюю проблему, нам нужно разделить datepickers и monthpickers. Мы могли бы получить один из немногих аддонов jQuery-UI monthpicker, но некоторым не хватает гибкости/способности локализации, некоторым не хватает поддержки анимации...так что делать? сверните свой "собственный" из datepicker-кода! это дает вам полностью функционирующий monthpicker, со всеми функциями datepicker, только без отображения дней.
Я поставил monthpicker JS-скрипт и сопутствующие В CSS-скрипт, используя метод, описанный ниже, с jQuery-UI v1.11.1 код. Просто скопируйте эти фрагменты кода в два новых файла, monthpicker.js и monthpicker.УСБ, соответственно.
вот процесс, который я прошел, чтобы клонировать оригинальный datepicker и сделать его monthpicker
Если вам все равно, как я это сделал, прокрутите этот раздел и вниз до строки " Теперь, чтобы добавить datepickers и monthpickers в Пейдж!"
Я взял весь код javascript из jquery-ui-1.11.1.js, относящийся к их datepicker, вставил его в новый js-файл и заменил следующие строки:
- "datepicker" = = > "monthpicker"
- "Datepicker" = = > "Monthpicker"
- "выбор даты" = = > "выбор месяца"
- "выбор даты" = = > "выбор месяца"
затем я удалил часть for-loop, которая создает весь ui-datepicker-calendar div (другие решения скрываются с помощью CSS). Это можно найти в _generateHTML: function (inst).
найдите строку, которая говорит:
"</div><table class='ui-datepicker-calendar'><thead>" +
отметить все от после закрытия div-tag и вплоть до (и не в том числе) в строке где написано:
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...
затем я копирую / вставляю код из jQuery-ui.css, относящийся к datepickers к новому CSS-файлу, и заменил следующие строки:
- "datepicker" = = > "monthpicker"
теперь, чтобы добавить datepickers и monthpickers на страницу!
эти следующие фрагменты кода javascript работают с несколько datepickers и / или monthpickers на странице, без вышеупомянутых проблем! исправлено обычно с помощью ' $(this). много :)
первый скрипт предназначен для обычного datepicker, а второй-для "новых" monthpickers.
из-комментирует .после, который позволяет создать некоторый элемент для очистки поля ввода, украден из ответа пола Ричардса.
Я использую формат "MM yy" в моем monthpicker, и 'yy-mm-dd' формат в моем datepicker, но это полностью совместим со всеми форматами, так что вы можете использовать любой, который вы хотите. Просто измените параметр "dateFormat". ShowButtonPanel стандартных вариантов'', 'showAnim', и 'yearRange' это конечно опционально и настраивается под ваши пожелания.
добавление datepicker
создание экземпляра Datepicker. Эта история началась 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('');
// })
//)
;
добавление monthpicker
включить monthpicker.файл js и monthpicker.css-файл на странице, которую вы хотите использовать monthpickers.
экземпляр Monthpicker Значение, полученное из этого monthpicker, всегда является первым днем выбранного месяц. Начинается в текущем месяце, и колеблется от 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('');
// })
//)
;
вот именно! Это все, что вам нужно сделать monthpicker.
Я не могу заставить jsfiddle работать с этим, но он работает для меня в моем ASP.NET проект MVC. Просто сделайте то, что вы обычно делаете, чтобы добавить datepicker на свою страницу и включить вышеуказанные сценарии, возможно, изменив селектор (что означает $("#MyMonthTextBox")) на что-то, что работает для тебя.
надеюсь, это кому-то поможет.
ссылки на pastebins для некоторых дополнительных настроек даты и monthpicker:
Monthpicker работает в последний день месяца. Дата, которую вы получите от этого monthpicker, всегда будет последним днем месяца.
два сотрудничающих monthpickers; "начало" работает в первом месяце, а "конец" работает в последнем из месяц. Они оба ограничены друг другом, поэтому выбор месяца в "конце", который находится до выбранного месяца в "начале", изменит "начало" на тот же месяц, что и "конец". И наоборот. Необязательно: при выборе месяца на "пуск", "minDate" устанавливается на "конец". Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).
два сотрудничающих datepickers; они оба ограничены друг другом, поэтому выбор даты на "конец" который находится перед выбранной датой "начала", изменит "начало" на тот же месяц, что и "конец". И наоборот. Необязательно: при выборе даты на "start", "minDate" устанавливается на "end". Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).
добавить еще одно простое решение
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'M yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
http://jsfiddle.net/tmnasim/JLydp/
Особенности:
- отображать только месяц / год
- добавляет значение месяца года в поле ввода только при нажатии кнопки Готово
- нет" повторно открыть "поведение, когда нажмите кнопку" Готово"
------------------------------------
другое решение, которое хорошо работает для datepicker и monthpicker в том же страница: (также избегайте ошибки mutiple нажмите на предыдущую кнопку в IE, что может произойти, если мы используем функцию фокусировки)
JS fiddle link
Мне понравился ответ @user1857829 и его подход"extend-jquery-like-a-plugin". Я только что сделал небольшую модификацию, так что, когда вы меняете месяц или год каким-либо образом, сборщик фактически записывает дату в поле. Я обнаружил, что мне нравится такое поведение после его использования.
jQuery.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
onChangeMonthYear: writeSelectedDate
}, options);
function writeSelectedDate(year, month, inst ){
var thisFormat = jQuery(this).datepicker("option", "dateFormat");
var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
inst.input.val(d);
}
function hideDaysFromCalendar() {
var thisCalendar = $(this);
jQuery('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
jQuery('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
thisCalendar.datepicker("hide");
});
}
jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
у меня были определенные трудности с принятыми ответа и никто другой не мог быть использован с минимальными усилиями в качестве базы. Поэтому я решил настроить последнюю версию принятого ответа, пока он не удовлетворит хотя бы минимальным стандартам кодирования/повторного использования JS.
вот так гораздо более чистое решение чем 3-е (последнее) издание на Бен Келерпринятый ответ. Более того, он будет:
- работать не только с
mm/yy
формат, но с любым другим, включая ОПMM yy
. - не скрывать календарь других datepickers на странице.
- неявно загрязнять глобальный объект JS с помощью
datestr
,month
,year
etc переменные.
зацени:
$('.date-picker').datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
if (!isDonePressed)
return;
var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();
$(this).datepicker('setDate', new Date(year, month, 1)).change();
$('.date-picker').focusout();
},
beforeShow: function (input, inst) {
var $this = $(this),
// For the simplicity we suppose the dateFormat will be always without the day part, so we
// manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
date;
try {
date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
} catch (ex) {
return;
}
$this.datepicker('option', 'defaultDate', date);
$this.datepicker('setDate', date);
inst.dpDiv.addClass('datepicker-month-year');
}
});
и все остальное, что вам нужно это в CSS где-то рядом:
.datepicker-month-year .ui-datepicker-calendar {
display: none;
}
вот и все. Надеюсь, что вышеизложенное сэкономит некоторое время для дальнейшего читатели газеты.
Я знаю, что это немного поздний ответ, но я получил ту же проблему за пару дней до этого, и я пришел с хорошим и гладким решением. Сначала я нашел этот отличный выбор даты здесь
тогда я только что обновил класс CSS (jquery.календарпикер.css), который поставляется с примером, как это:
.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
}
.calDay
{
display:none;
}
плагин запускает событие DateChanged, когда вы что-то меняете, поэтому не имеет значения, что вы не нажимаете на день (и он подходит хорошо, как год и месяц подборщика)
надеюсь, что это помогает!
Мне также нужен был сборщик месяца. Я сделал простой с годом на заголовке и 3 строками 4 месяцев ниже. Проверьте это: простой выбор месяца с jQuery.
Я пробовал различные решения, представленные здесь, и они работали нормально, если вы просто хотели пару выпадающих.
Лучший (по внешнему виду и т. д.) 'picker' (https://github.com/thebrowser/jquery.ui.monthpicker) здесь предлагается в основном копия старой версии jQuery-ui datepicker с переписанным _generateHTML. Тем не менее, я обнаружил, что он больше не играет хорошо с текущим jQuery-ui (1.10.2) и имел другие проблемы (не закрывается на esc, не закрывается другое открытие виджета, имеет жестко закодированные стили).
вместо того, чтобы пытаться исправить этот monthpicker и вместо того, чтобы повторно подключить тот же процесс с последним datepicker, я пошел с подключением к соответствующим частям существующего выбора даты.
Это предполагает переопределение:
- _generateHTML (для построения разметки выбора месяца)
- parseDate (так как ему не нравится, когда нет компонента дня),
- _selectDay (as использует элемент управления datepicker .html (), чтобы получить значение Дня)
поскольку этот вопрос немного стар и уже хорошо ответил, Вот только переопределение _selectDay, чтобы показать, как это было сделано:
jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
// "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};
Как говорится, это старый вопрос, но я нашел его полезным, поэтому хочу добавить обратную связь с альтернативным решением.
для monthpicker, используя JQuery v 1.7.2, у меня есть следующий javascript, который делает именно это
$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});
все здесь получают значение месяца, года, как это,
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var month = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
но только что я столкнулся с проблемой при извлечении значений из >
и <
. Потому что он дает нам значение выбранного значения в раскрывающемся списке, поэтому он предоставляет нам old
значение не new
значения.
Итак, в соответствии с документом jQuery UI : -http://api.jqueryui.com/datepicker/.
Мы можем сразу принести год, месяц от функции. Для других значений, таких как day
так далее. мы можем легко получить к ним доступ через объект inst
Спасибо за решение Бена Келера.
однако у меня была проблема с несколькими экземплярами datepickers, причем некоторые из них требовались с выбором дня. Решение Бена Келера (в правке 3) работает, но скрывает выбор дня во всех случаях. Вот обновление, которое решает эту проблему :
$('.date-picker').datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
$(this).datepicker(
'setDate',
new Date(
$("#ui-datepicker-div .ui-datepicker-year :selected").val(),
$("#ui-datepicker-div .ui-datepicker-month :selected").val(),
1
)
).trigger('change');
$('.date-picker').focusout();
}
$("#ui-datepicker-div").removeClass("month_year_datepicker");
},
beforeShow : function(input, inst) {
if((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$("#ui-datepicker-div").addClass("month_year_datepicker");
}
}
});