JQuery Datetime Picker - нужно выбрать только месяц и год - PullRequest
Новая
       9

JQuery Datetime Picker - нужно выбрать только месяц и год

10 голосов
/ 02 ноября 2010

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

Но так как у меня есть несколько сборщиков даты и времени в одной форме, это происходит. CSS display:none является целью скрыть дни, которые не будут показаны. Но если у меня есть несколько сборщиков даты и времени в одной форме, но только один, я хочу сделать один из них сборщиком месяцев, как я могу этого добиться? С помощью команды thw css все дни в пользовательском интерфейсе всего календаря datetime исчезают, поскольку css изменит атрибут .ui-datepicker-calendar. Любые предложения приветствуются.

Ответы [ 7 ]

9 голосов
/ 17 ноября 2010

В настоящее время datepicker создает только 1 элемент на странице, который разделяют все входные данные datepicker, поэтому ответ на связанный вопрос не работает.Событие beforeShow не позволяет редактировать элемент datepicker с помощью .addClass () или .css () (поскольку структура элемента обновляется из сценария 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/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    $('.month-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) {
            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', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                $(this).datepicker('setDate', new Date(year, month, 1));
            }
        }
    });
    $('.date-picker').datepicker();
    $('.month-picker').focus(function () {
        $('.ui-datepicker-calendar').addClass('hideDates');
    });
});
</script>
<style>
.hideDates {
    display: none;
}
</style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <label for="endMonth">End Month:</label>
    <input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>
3 голосов
/ 16 февраля 2011

Я использовал немного другую версию кода, которую отправил Бен. Вместо того, чтобы полагаться на событие фокуса, я добавил 

inst.dpDiv.addClass('monthonly');

в метод beforeShow и 

inst.dpDiv.removeClass('monthonly');

в onClose. Это добавляет и удаляет класс общего div, используемого всеми виджетами DatePicker. Затем можно настроить таргетинг на календарь даты в css, используя 

.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
    display: none;
}
2 голосов
/ 21 июля 2011

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

<style>
    .ui-datepicker-calendar {
        display: none;
    }
</style>

Затем я инициализирую свой указатель даты, как и другие, и добавляю немного кода в событие onChangeMonthYear:

$n(this).datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(year, month, inst) {
        $(this).datepicker('setDate', new Date(year, month - 1, 1));
    }
});

Примечание:

month - 1

Если вы не добавите это, вы получите переполнение стека, потому что эта функция получаетиндексный месяц, основанный на 1, но setDate использует обычный месяц, основанный на 0.

2 голосов
/ 23 февраля 2011

Предыдущее решение не будет работать с разными форматами. Также setDate ничего не будет делать в beforeShow. Правильный способ сделать это будет: 

beforeShow: function(input, inst) {
    var dateString = $(this).val();
    var options = new Object();
    if (dateString.length > 0) {
        options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateString);
    }
    inst.dpDiv.addClass("ui-monthpicker");
    return options;
},
onClose: function(dateText, inst) {
    var month = inst.dpDiv.find(".ui-datepicker-month").val();
    var year = inst.dpDiv.find(".ui-datepicker-year").val();
    $(this).datepicker("setDate", new Date(year, month, 1));
    inst.dpDiv.removeClass("ui-monthpicker");
}

Я использовал parseDate из datepicker для обработки различных форматов даты и возврата даты из поля в качестве опции defaultDate.

Обязательный CSS: 

#ui-datepicker-div.ui-monthpicker {
    padding: 0.2em;
}
#ui-datepicker-div.ui-monthpicker .ui-datepicker-calendar {
    display: none;
}
1 голос
/ 30 марта 2011

Решение Бена работает отлично, только что внесли небольшие изменения, я использовал onChangeMonthYear вместо onClose: 

onChangeMonthYear: function(year, month, inst) {
  var date = new Date(year, month - 1, 1);
  $(this).val($.datepicker.formatDate(format, date));
  $(this).datepicker('setDate', date);
}
1 голос
/ 02 ноября 2010

Я сделал что-то похожее на это, но сделал отдельную «версию» скрипта datepicker и назвал его monthpicker, имея собственные селекторы CSS и CSS-файл. Это означало, что вы можете использовать один или оба на одной странице.

0 голосов
/ 16 мая 2011

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

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

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...