jQuery UI DatePicker, чтобы показать только месяц год

374

Я использую средство выбора даты jQuery для отображения календаря во всем приложении. Я хочу знать, могу ли я использовать его для отображения месяца и года (май 2010), а не календаря?

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
источник

16

Так ты хочешь месяц выбрать?

Дотти

Вы используете jQueryUI DatePicker?

wpjmurray

Да. jQueryUI DatePicker

Aanu

6

это не ответ на ваш вопрос, но у нас это сейчас выглядит гораздо лучше: eternicode.github.io/bootstrap-datepicker/…

Рубен

bootstrap-datepicker выглядит как прекращенное репо с накоплением проблем без какой-либо заметной работы по их устранению ...

kumarharsh

424

Вот хак (обновленный с помощью всего файла .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

Бен Келер
источник

14

Вызов setDate снова откроет средство выбора в некоторых браузерах. Чтобы предотвратить это, отключили и включили средство выбора: $ (this) .datepicker ('отключить'); $ (this) .datepicker ('setDate', new Date (year1, month1, 1)); $ (это) .datepicker ( 'включить');

Sven Sönnichsen

1

@ Свен вот альтернатива:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

Я пытаюсь использовать это решение, но использование getDate для DatePicker возвращается только сегодня. Что происходит?

supertopi

1

Я вижу, что большинство примеров используют встроенные стили на самой странице. Это будет проблемой, если вам как-то понадобится несколько календарей (например, с разными настройками) на одной странице. Я предпочитаю добавлять стили в файл .css как таковые:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

И затем использовать Javascript для манипулирования поведением:$("#ui-datepicker-div").addClass('noCalendar');

Poweratom

1

На приведенном выше примере, если я хочу очистить текстовое поле, то я не могу. Может кто-нибудь мне помочь.

Бик

83

Этот код работает для меня безупречно:

<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" />

Выход:

Лениэль Маккаферри
источник

Как можно установить значение для этого календаря.

Рафик Малек

62

@ Бен Келер , это префект! Я сделал небольшую модификацию, так что использование одного экземпляра выбора даты более одного раза работает, как и ожидалось. Без этого изменения дата анализируется неправильно, а ранее выбранная дата не выделяется.

<!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>

BrianS
источник

Этот ответ в основном правильный. Однако мне пришлось изменить MM на M, чтобы получить правильный месяц, который будет выбран, когда дата уже выбрана.

Чазак

18

Приведенные выше ответы довольно хороши. Моя единственная жалоба заключается в том, что вы не можете очистить значение после его установки. Также я предпочитаю подход extension-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();

user1857829
источник

2

в конце концов, я отказываюсь от этого, потому что это неработоспособно, так как события onSelect и / или onChangeMonthYear и / или onClose либо не запускаются, либо не получают правильные значения, либо, при переопределении, заставляют виджет перестать работать

knocte

10

<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));
            }
        }
    });
});

Это решит проблему =) Но я хотел время отформатировать гггг-мм

Только попробовал в FF4, хотя

Эрик Полдер
источник

"yy" в JQuery - это четыре цифры года. Если это то, что вы хотите, вы только что достигли этого.

Павел Дида

9

У меня была такая же потребность сегодня, и я нашел ее на github, работает с jQueryUI и в календаре вместо календаря выбирается месяц.

https://github.com/thebrowser/jquery.ui.monthpicker

Энтони Шоу
источник

5

Не поддерживается, но есть

ответвление

8

Вот что я придумал. Он скрывает календарь, не нуждаясь в дополнительном блоке стилей, и добавляет кнопку очистки, чтобы решить проблему невозможности очистки значения после нажатия на ввод. Также хорошо работает с несколькими сборщиками месяцев на одной странице.

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('');
    })
);

Пол Ричардс
источник

5

Мне нужно было выбрать месяц / год для двух полей (From & To), и когда одно из них было выбрано, Max / Min было установлено на другое ... а-ля выбираются даты авиабилетов. У меня были проблемы с настройкой 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; }

Эми Струк
источник

5

Я объединил многие из вышеупомянутых хороших ответов и пришел к этому:

    $('#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)
                });
            });

Это доказало свою работоспособность, но столкнулось со многими ошибками, поэтому я был вынужден установить патч в нескольких местах:

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

patch1: в _showDatepicker: чтобы сгладить шкуру;

patch2: in _checkOffset: исправить положение выбора месяца (в противном случае, когда поле находится внизу браузера, проверка смещения отключена);

patch3: inClose of _hideDatepicker: в противном случае при закрытии поля даты будут мигать в течение очень короткого периода, что очень раздражает.

Я знаю, что мое исправление было далеко не хорошим, но пока оно работает. Надеюсь, поможет.

rexwolf
источник

Просто добавьте эту строку в beforeShow: {inst.dpDiv.addClass ('month_year_datepicker')}. мигание дат прекратится :). Также я думаю, что .focus тогда не понадобится

Параг

5

Добавьте еще одно простое решение

 $(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 на одной странице: (также избегайте ошибки многократного нажатия на предыдущую кнопку в IE, которая может возникнуть, если мы используем функцию фокуса)
Ссылка JS fiddle

Крис Фан
источник

4

Это только у меня так или не работает как должно в IE (8)? Дата изменяется при нажатии кнопки «Готово», но средство выбора даты открывается снова, пока вы фактически не щелкнете где-нибудь на странице, чтобы потерять фокус на поле ввода ...

Я ищу решение этой проблемы.

<!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>

Том Ван Шур
источник

1

$ (это) .datepicker ( 'выключить'); $ (this) .datepicker ('setDate', new Date (year, month, 1)); $ (это) .datepicker ( 'включить'); Решает проблему.

Том Ван Шур

1

Это не ответ

сишарп

4

Если вы ищете средство выбора месяца, попробуйте этот jquery.mtz.monthpicker

Это сработало для меня хорошо.

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

user2630080
источник

Ссылка мертва. Этот сайт не может быть достигнуто | DNS-адрес сервера lucianocosta.info не найден.

Пан

1

Вот обновленная ссылка: lucianocosta.com.br/jquery.mtz.monthpicker

Себастьян С.

Обновленная ссылка также не работает.

нащий

4

Как и многие другие, я столкнулся с многочисленными проблемами, пытаясь это сделать, и только комбинация опубликованных решений и, в конечном итоге, большой взлом, чтобы сделать его идеальным, дали мне решение.

Проблемы с другими решениями в этой теме, которые я пробовал:

Выбор новой даты в устройстве выбора даты также приведет к изменению (внутренней) даты других средств выбора даты, поэтому при повторном открытии других (или попытке получить их дату) они будут иметь другую дату, чем та, которая отображается в назначенном им входе. -field.
DatePicker не будет «помнить» дату при повторном открытии.
Код для манипулирования датами использовал подстроку, поэтому он не был совместим со всеми форматами.
«Мой ежемесячник» изменял поле ввода только при его закрытии, а не всякий раз, когда значения менялись.
Поле ввода не обновляется правильно, если вы введете неправильно отформатированную строку ввода для даты, а затем нажмете «Закрыть» в средстве выбора даты.
Я не могу иметь обычные средства выбора даты, которые показывают дни, на той же странице, что и средства выбора месяца, которые не показывают дни.

Я наконец-то нашел способ исправить все эти проблемы . Первые четыре можно исправить, просто следя за тем, как вы ссылаетесь на сборщиков дат и месяцев в их внутреннем коде, и, конечно, проводите ручное обновление ваших сборщиков. Это вы можете увидеть в примерах реализации в нижней части. Пятой проблеме можно помочь, добавив некоторый пользовательский код в функции DatePicker.

НОТА: Вам НЕ нужно использовать следующие сценарии выбора месяца, чтобы исправить первые три проблемы обычного средства выбора даты. Просто используйте скрипт создания даты в нижней части этого поста.

Теперь, чтобы использовать сборщики месяцев и исправить последнюю проблему, нам нужно разделить сборщики данных и сборщики месяцев. Мы могли бы получить одно из немногих аддонов для ежемесячного выбора jQuery-UI, но некоторым не хватает гибкости / способности локализации, некоторым не хватает поддержки анимации ... так что же делать? Бросьте свой "собственный" из кода datepicker! Это дает вам полностью функционирующее средство выбора месяца со всеми функциями средства выбора даты, без отображения дней.

Я поставил js-скрипт для месячного выбора и соответствующий CSS-скрипт , используя метод, описанный ниже, с кодом jQuery-UI v1.11.1. Просто скопируйте эти фрагменты кода в два новых файла, monthpicker.js и monthpicker.css соответственно.

Если вы хотите прочитать о довольно простом процессе, с помощью которого я преобразовал средство выбора даты в средство выбора месяца, прокрутите вниз до последнего раздела.

Теперь, чтобы добавить даты и месяцы на страницу!

Эти следующие фрагменты кода javascript работают с несколькими сборщиками дат и / или сборщиками месяцев на странице без вышеупомянутых проблем! Исправлено, как правило, с помощью '$ (this).' много :)

Первый скрипт предназначен для обычного средства выбора даты, а второй - для «нового» средства выбора месяца.

Вне прокомментировал .after , который позволяет создавать какой - то элемент , чтобы очистить поле ввода-, украден от ответа Пол Ричардс.

Я использую формат «MM yy» в моем месячном средстве выбора и формат «yy-mm-dd» в моем указателе даты, но он полностью совместим со всеми форматами , поэтому вы можете использовать любой, какой захотите. Просто измените параметр dateFormat. Стандартные параметры 'showButtonPanel', 'showAnim' и 'yearRange', конечно, являются необязательными и настраиваются в соответствии с вашими пожеланиями.

Добавление указателя даты

Datepicker экземпляр. Этот идет от 90 лет назад и до наших дней. Это поможет вам сохранить правильность поля ввода, особенно если вы установите параметры defaultDate, minDate и maxDate, но может справиться с этим, если вы этого не сделаете. Он будет работать с любым форматом даты, который вы выберете.

        $('#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.js и файл monthpicker.css на страницу, которую вы хотите использовать.

Создание экземпляра 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('');
    //    })
    //)
    ;

Это оно! Это все, что вам нужно, чтобы сделать ежемесячный сборщик.

Я не могу заставить jsfiddle работать с этим, но он работает для меня в моем проекте ASP.NET MVC. Просто сделайте то, что вы обычно делаете, чтобы добавить средство выбора даты на свою страницу и включить вышеупомянутые сценарии, возможно, изменив селектор (то есть $ ("# MyMonthTextBox")) на то, что вам подходит.

Я надеюсь, что это помогает кому-то.

Ссылки на pastebins для некоторых дополнительных настроек даты и месяца:

Monthpicker работает в последний день месяца . Дата, которую вы получаете от этого месяца, всегда будет последним днем месяца.
Два сотрудничающих сборщика месяцев ; «start» работает с первым месяцем, а «end» работает с последним месяцем. Они оба ограничены друг другом, поэтому выбор месяца в конце, предшествующего выбранному месяцу в начале, изменит начало на тот же месяц, что и конец. И наоборот. ДОПОЛНИТЕЛЬНО: При выборе месяца для «начала» значение «minDate» для «конца» устанавливается на этот месяц. Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).
Два сотрудничающих сборщика даты ; Они оба ограничены друг другом, поэтому выбор даты в конце, предшествующей выбранной дате начала, изменит начало на тот же месяц, что и конец. И наоборот. ДОПОЛНИТЕЛЬНО: При выборе даты «начало», «minDate» на «конец» устанавливается на эту дату. Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).

Как я изменил DatePicker, чтобы стать MonthPicker

Я взял весь код javascript из jquery-ui-1.11.1.js, относящийся к их средству выбора даты, вставил его в новый js-файл и заменил следующие строки:

"datepicker" ==> "monthpicker"
"Datepicker" ==> "Monthpicker"
"Выбор даты" ==> "Выбор месяца"
«Выбор даты» ==> «Выбор месяца»

Затем я удалил часть цикла for, которая создает весь div ui-datepicker-calendar (div, который другие решения скрывают с помощью CSS). Это можно найти в функции _generateHTML: (inst).

Найдите строку, которая говорит:

"</div><table class='ui-datepicker-calendar'><thead>" +

Отметьте все, начиная с закрывающего тега div и вплоть до (и не включая) строки, где написано:

drawMonth++;

Теперь это будет несчастным, потому что нам нужно закрыть некоторые вещи. После этого закрывающего тега div добавьте следующее:

";

Код теперь должен быть красиво соединен вместе. Вот фрагмент кода, показывающий, чем вы должны были закончить:

...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, относящийся к указателям даты, в новый CSS-файл и заменил следующие строки:

"datepicker" ==> "monthpicker"

Ультроман Такоман
источник

3

после поиска jQueryUI.com для DatePicker, вот мой вывод и ответ на ваш вопрос.

Во-первых, я бы сказал нет на ваш вопрос. Вы не можете использовать jQueryUI DatePicker только для выбора месяца и года. Не поддерживается У него нет функции обратного вызова для этого.

Но вы можете взломать его, чтобы отображать только месяц и год, используя css, чтобы скрыть дни и т. Д. И я думаю, что это не имеет смысла, потому что вам нужно нажимать на даты, чтобы выбрать дату.

Я могу сказать, что вы просто должны использовать другой сборщик дат. Как то, что предложил Роджер.

Reigel
источник

3

У меня была проблема выбора даты, смешанного с выбором месяца. Я решил это так.

    $('.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();

        }
    });

PYT
источник

3

Если кто-то хочет это также для нескольких календарей, добавить эту функциональность все же в интерфейс jquery не очень сложно. с минимизированным поиском:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

добавить это перед х

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 и предоставьте настройки 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 ключ здесь :)

prdatur
источник

2

Что о: http://www.mattkruse.com/javascript/calendarpopup/

Выберите пример выбора месяца

Роджер
источник

Поскольку я уже использую jquery datepicker, я предпочитаю использовать его или составить месяц и год вручную.

Aanu

2

Сделал пару уточнений почти идеального ответа BrianS выше:

Я повторно определила значение, установленное на show, потому что я думаю, что в действительности это делает его немного более читабельным (хотя обратите внимание, что я использую немного другой формат)
Мой клиент не хотел иметь календарь, поэтому я добавил добавление класса «показать / скрыть», чтобы сделать это, не затрагивая другие средства выбора даты. Удаление класса выполняется по таймеру, чтобы избежать повторного всплеска таблицы при исчезновении средства выбора даты, что, по-видимому, очень заметно в IE.

РЕДАКТИРОВАТЬ: остается одна проблема, которую нужно решить, это то, что нет способа очистить указатель даты - очистите поле и щелкните, и он снова заполнится выбранной датой.

РЕДАКТИРОВАТЬ 2: Мне не удалось решить это красиво (т.е. без добавления отдельной кнопки Очистить рядом с входом), поэтому в конечном итоге просто использовать это: 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.$2, parseInt(RegExp.$1, 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
}

Whelkaholism
источник

2

Мне понравился ответ @ 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);
}

stravanato
источник

2

У меня были определенные трудности с принятым ответом, и никто другой не мог быть использован с минимальными усилиями в качестве основы. Итак, я решил настроить последнюю версию принятого ответа, пока он не будет соответствовать хотя бы минимальным стандартам кодирования / повторного использования JS.

Вот способ решения гораздо чище , чем третий (последний) выпуск из Ben Koehler общепринятом ответ «s. Более того, оно будет:

работать не только с mm/yyформатом, но и с любым другим, включая OP MM yy.
не скрывать календарь других людей на странице.
не неявно загрязняют глобальный объект JS с datestr, month, и yearт.д. переменные.

Проверьте это:

$('.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;
}

Вот и все. Надеюсь, что выше сэкономит время для дальнейших читателей.

Александр Абакумов
источник

1

Просто и к вашему сведению. Строка 'inst.dpDiv.addClass (' datepicker-month-year ');' добавит целый месяц-год к календарному разделу datepicker, то есть, если есть другие поля даты с datepicker, они перестанут работать из-за этого. Поскольку для календаря есть только один элемент div, было бы интересно добавить '$ ('. Datepicker-month-year '). RemoveClass (' datepicker-month-year ');' использование beforeShow для любых других сборщиков дат, для которых требуется традиционный календарь. ИЛИ, удалите класс, когда вы потеряете фокус. Но я не смог найти ничего, что связано с этим в API

Джонни Bigoode

1

Это полный ответ, который должен использовать каждый. Самой большой проблемой, которая была решена для меня, было всплывающее окно ввода даты по умолчанию с текущим месяцем и годом, независимо от того, что уже есть в нем. Этот ответ исправил это.

Алекс Ф

1

Я знаю, что это немного запоздалый ответ, но у меня возникла та же проблема пару дней назад, и я нашел хорошее и плавное решение. Сначала я нашел этот отличный сборщик дат здесь

Затем я только что обновил класс CSS (jquery.calendarPicker.css), который поставляется с примером, подобным этому:

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

Плагин запускает событие DateChanged, когда вы что-то меняете, поэтому не имеет значения, что вы не нажимаете на день (и он подходит как средство выбора года и месяца)

Надеюсь, поможет!

pjnovas
источник

1

Мне также нужен был сборщик месяцев. Я сделал простую с годом на заголовке и 3 рядами 4 месяца ниже. Проверьте это: Простой месячный сборщик с jQuery .

Тиаго Коэльо
источник

1

Я попробовал различные решения, представленные здесь, и они отлично работали, если вы просто хотели пару выпадающих.

Лучший (по внешнему виду и т. Д.) Сборщик ( https://github.com/thebrowser/jquery.ui.monthpicker ), предлагаемый здесь, в основном представляет собой копию старой версии средства выбора даты jquery-ui с переписанным _generateHTML. Однако я обнаружил, что он больше не работает с текущим jquery-ui (1.10.2) и имел другие проблемы (не закрывается при esc, не закрывается при открытии других виджетов, имеет жестко запрограммированные стили).

Вместо того, чтобы пытаться исправить этот месяц и вместо того, чтобы повторить попытку того же самого процесса с последним сборщиком дат, я пошел с подключением к соответствующим частям существующего выбора даты.

Это включает переопределение:

_generateHTML (для создания разметки выбора месяца)
parseDate (так как ему не нравится, когда нет дневного компонента),
_selectDay (поскольку 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);
};

Как уже говорилось, это старый вопрос, но я нашел его полезным, поэтому хотел добавить обратную связь с альтернативным решением.

freedomn-м
источник

0

для средства выбора месяца, используя 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'] });

Рикардо Эпплтон
источник

0

Спасибо за решение Бена Келера.

Однако у меня была проблема с несколькими экземплярами сборщиков дат, причем некоторые из них требовались при выборе дня. Решение Бена Келера (в редакции 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");
        }
    }
});

dj3c1t
источник

-2

Воспользуйтесь onSelectобратным вызовом, удалите часть года вручную и установите текст в поле вручную

Теджа Кантамнени
источник

3

Я думаю, что вы не читаете вопрос. Аану хочет «отобразить месяц и год (май 2010), а не календарь».

Рейгель