В поисках JavaScript месяца Picker - PullRequest
Новая
       33

В поисках JavaScript месяца Picker

46 голосов
/ 12 октября 2008

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

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

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

Это просто тупая версия DatePicker. Существует ли что-то подобное?

Ответы [ 6 ]

19 голосов
/ 28 июля 2010

Бен Келер из этот эквивалентный вопрос предлагает взломать jquery ui, который работает достойно. Приведено здесь для удобства, вся заслуга его.

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>
11 голосов
/ 15 октября 2013

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

Month picker example

Использовать его по умолчанию просто, выполнив следующее: 

$("input[type='month']").MonthPicker();
9 голосов
/ 12 ноября 2012

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

Month Picker in action

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

3 голосов
/ 13 октября 2008

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

2 голосов
/ 16 сентября 2015

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

Monthpicker screenshot

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

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

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

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

Вы можете найти живую демонстрацию здесь: Codepen

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

0 голосов
/ 13 мая 2009

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

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

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

Я закончил тем, что использовал это: http://jqueryui.com/demos/datepicker/

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...