В поисках JavaScript Month Picker

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

В принципе, я после упрощенной версии jQuery UI Date Picker. Меня не волнует день месяца, только месяц и год. Использование элемента управления выбора даты выглядит как излишний и клочья. Я знаю, что могу просто использовать пару выделенных ящиков, но это ощущение захламляется, а затем мне также нужна кнопка подтверждения.

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

Это действительно просто тупиковая версия DatePicker. Что-то вроде этого существует?

Ответы

Ответ 1

Для тех, кто все еще смотрит в будущее (как и я), вот красивая, простая в использовании, совместимая с jQuery UI, хорошо документированная, протестированная альтернатива:

Month picker example

Его использование по умолчанию просто, как это делается:

$("input[type='month']").MonthPicker();

Ответ 2

Ben Koehler от этот эквивалентный вопрос предлагает jquery ui hack, который работает прилично. Цитированный здесь для удобства, все его заслуги.

JSFiddle этого решения

- Здесь взломан (обновлен весь файл .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) { 
            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>

Ответ 3

Найден один на lucianocosta.info. Это выглядит неплохо:

Month Picker in action

ОБНОВЛЕНО 2016-02-13: ссылка, которая работает

Ответ 4

Я использовал этот script в программе некоторое время назад. Хотя он является древним, он хорошо работает на всех браузерах. Если вы посмотрите вниз на "Календарь выбора месяца", я считаю, что это то, что вы ищете. В примере, который есть, есть открытие календаря в новом окне (ew), но 1 настройка (например, второй пример) делает его show ala jQuery. Удачи.

Ответ 5

Не забудьте посмотреть мой собственный плагин jQuery:

Снимок экрана Monthpicker

Прост в использовании:

$("#myTextInput").Monthpicker();

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

Существуют также события, которые обеспечивают способ кодирования взаимозависимости между двумя месячными (начало и конец даты)

Здесь вы можете найти живое демо: Codepen

Вы можете взять исходный код из Github и изменить все, что хотите: Репозиторий Github

Ответ 6

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

Вот те, на которые я смотрел:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

В итоге я использовал этот: http://jqueryui.com/demos/datepicker/

Если вы хорошо разбираетесь в JQuery, возможно, вы создали небольшой проект.