В поисках средства выбора месяца JavaScript
Я ищу инструмент для выбора месяца на JavaScript. Я уже использую jQuery на веб-сайте, поэтому, если бы это был плагин jQuery, он бы отлично подошел. Я открыт и для других вариантов.
В принципе, мне нужна упрощенная версия Средство выбора даты пользовательского интерфейса jQuery. Меня не волнует день месяца, только месяц и год. Использование элемента управления «Выбор даты» кажется излишним и беспорядочным. Я знаю, что могу просто использовать пару полей выбора, но это кажется загроможденным, и тогда мне также нужна кнопка подтверждения.
Я представляю себе сетку либо из двух рядов по шесть столбцов, либо из трех рядов по четыре столбца для выбора месяца, а также текущих и будущих лет в верхней части. (Может быть, возможность перечислить несколько лет? Я не вижу никого, кому когда-либо нужно было бы идти вперед более чем на год или два, поэтому, если бы я мог перечислить текущий и следующие два года, это было бы здорово.)
На самом деле это просто упрощенная версия DatePicker. Что-то подобное существует?
Мне пришлось приостановить весь проект, так что пока проблема отошла на второй план.
Я изменил принятый ответ. Новый активно поддерживается на GitHub.
@AdamTuttle Ницца. Мне также удалось получить 6 худших ответов, которые были уничтожены с помощью флагов модов или приставали их авторов к самоудалению комментариями и отрицательными голосами. Я думаю, что в результате вероятность того, что эта страница поможет гуглерам попасть на нее, значительно возросла; пусть он уклонится от закрытой причины «вопросы, в которых просят нас порекомендовать инструмент или программную библиотеку не по теме», еще какое-то время!
Если вы ищете чистый фрагмент javascript. проверьте здесь, чтобы получить это kvcodes.com/2018/04/simple-javascript-month-year-picker
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Некоторое время назад я использовал этот сценарий в программе. Хотя он древний, он хорошо работает во всех браузерах. Если вы посмотрите на «Календарь выбора месяца», я думаю, это то, что вы ищете. В приведенном примере календарь открывается в новом окне (ew), но 1 параметр (например, 2-й пример) заставляет его отображать ala jQuery. Удачи.
Я как раз на днях выбирал себе дату для выбора. Я нашел два других интересных примера, в которых вам поможет мощь, но я не уверен, как вы собираетесь это делать, не показывая календарь. Большинство «средств выбора даты» просто предполагают, что вы захотите увидеть календарь. Возможно, вам лучше поискать настраиваемый раскрывающийся список с некоторыми настраиваемыми кнопками, которые вы можете настроить.
Вот те, на которые я смотрел:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
В итоге я использовал вот этот: http://jqueryui.com/demos/datepicker/
Если вы хорошо разбираетесь в JQuery, возможно, у вас есть хороший небольшой проект.
Бен Келер от этот эквивалентный вопрос предлагает хак jquery ui, который работает прилично. Цитируется здесь для удобства, вся заслуга принадлежит ему.
- Вот хак (обновленный с полным файлом .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>
Проблема с этим взломом заключается в том, что вы не можете использовать другие обычные средства выбора даты на странице, потому что их календари также будут скрыты.
Однако он страдает еще одной довольно важной проблемой (Chrome 32, но я подозреваю везде). После выбора даты и повторного открытия окна выбора всегда выполняется текущая дата. Таким образом, даже переход через это поле изменит введенную вами дату на сегодняшнюю. Точно так же нет возможности отменить выбор даты - если вы откроете его случайно, вы должны будете выбрать новую дату. Я потратил немного времени, пытаясь обойти проблему, но пока без кубиков.
itsaruns, я пробовал все, что мог найти, чтобы добавить идентификатор в датпикеры, чтобы я мог добавить CSS к отдельным датпикерам, а не ко всем, но, похоже, ничего не работает. Пожалуйста, если вы (или кто-то еще) знаете, как это сделать, не могли бы вы опубликовать это здесь?
Вы просто не можете использовать ID, потому что у элемента он уже есть. Также элемент перерабатывается. Вот пример использования класса: beforeShow: function (input, inst) {inst.dpDiv.addClass ('monthpicker'); } onClose: функция (ввод, установка) {inst.dpDiv.removeClass ('monthpicker'); }
Нашел на lucianocosta.info. Смотрится неплохо:
ОБНОВЛЕНО 13.02.2016: ссылка, которая работает
просто это поможет кому-то в будущем, вам нужен хотя бы jquery 1.4.3, чтобы эта работа работала правильно. Я получил значение undefined за месяц при использовании jquery 1.4.2
Для всех, кто по-прежнему с нетерпением ждет этого (как и я), вот красивая, простая в использовании, совместимая с jQuery UI, хорошо документированная и протестированная альтернатива:
Его использование по умолчанию очень простое:
$("input[type='month']").MonthPicker();
есть ли способ настроить формат месяца / года? Таким образом, вместо мая 2013 г. мы видим 2013-05 гг.
Не стесняйтесь взглянуть на мой собственный плагин jQuery:
Легко использовать :
$("#myTextInput").Monthpicker();
Вариантов пока немного, но вы можете привязать ввод к ограниченному диапазону месяца.
Есть также события, которые позволяют кодировать взаимозависимость между двумя месяцами (дата начала и окончания).
Вы можете найти живую демонстрацию здесь: Codepen
Вы можете взять исходный код из Github и изменить все, что хотите: Репозиторий Github
Привет, можно ли это настроить для публикации разных форматов месяца / года, таких как гггг-ММ?
это не так, но вы можете разделить и перевернуть значение для достижения того же эффекта
Что ты делал тем временем? Я тоже ищу прямо сейчас то же самое.