JQuery UI DatePicker вопросы - PullRequest
Новая
       3

JQuery UI DatePicker вопросы

1 голос
/ 22 декабря 2011

У меня есть два текстовых поля From, To. Здесь я хочу сделать много вещей с двумя полями.

  1. Я хочу выбрать следующие три дня в выбранную дату. Что означает, что если я выбираю jan 1,2012 в Из поля , тогда поле К должно автоматически выберите jan 1,2,3 2012.
  2. Пока я наведите на jan 1, он должен выделить jan 1,2,3
  3. Пока я выбираю на jan 1, он должен отключиться через 10 дней (после jan 10 все даты должны быть отключены)
  4. Предположим, я отключен jan 2 означает. Пока я выбираю jan 1 в подсказке должно появиться сообщение, что вы не можете выбрать эти даты.

Дайте мне представление о том, какие функции используются для этого. Если у вас есть пример кода для любого из них, пожалуйста, поделитесь. Это очень поможет.

Это мои настройки 

var dates = jQuery("#From,#To").datepicker({
    beforeShowDay: excludeDates,
    showButtonPanel: true,
    dateFormat: "m/d/y",
    altFormat: 'yy-mm-dd',
    minDate: 0,
    onSelect: function(selectedDate, inst) {
        var option = this.id == "From" ? "minDate" : "maxDate",
            instance = jQuery(this).data("datepicker"),
            date = jQuery.datepicker.parseDate(instance.settings.dateFormat || jQuery.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);

        var d = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        var mydate = jQuery.datepicker.formatDate('yy-mm-dd', d);





    }
});

Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 24 декабря 2011

Это не полный ответ, но я взломал что-то вместе , что, надеюсь, поможет вам начать. Он удовлетворяет некоторым вашим требованиям, но подсветка при наведении не идеальна (иногда выделяются дополнительные даты), и я не доволен всеми объектами JavaScript Date, поэтому, возможно, потребуется некоторая оптимизация. Код включен ниже:

HTML 

From:<div id="fromDate"></div>
To:<div id="toDate"></div>

CSS 

body {
    margin:10px 0 0 5px;
    font-family:Verdana;
    font-size:.8em;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #743620 none; /* a color that fits the widget theme */
    color: white; /* a color that is readeable with the color above */
}

JavaScript 

$('#fromDate').datepicker({
    onSelect: function(dateText, inst) {
        // set range <selected, +10d> on toDate
        var minDate = $(this).datepicker('getDate');
        var maxDate = new Date(minDate);
        maxDate.setDate(maxDate.getDate() + 9);

        var plusOne = new Date(minDate);
        plusOne.setDate(minDate.getDate() + 1);
        var plusTwo = new Date(minDate);
        plusTwo.setDate(minDate.getDate() + 2);
        var nowPlusThree = [minDate, plusOne, plusTwo];

        $('#toDate').datepicker('destroy').multiDatesPicker({minDate: minDate, maxDate:maxDate, 'addDates': nowPlusThree});

        $('#fromDate').off('hover', 'a');
    }
});

$('#toDate').datepicker();

$('#fromDate').on('hover', 'a', function() {
    var hoveredDate = new Date($('#fromDate .ui-datepicker-month').text() + ' ' + $(this).text() + ' ' + $('#fromDate .ui-datepicker-year').text());

    var plusOne = new Date(hoveredDate);
    plusOne.setDate(hoveredDate.getDate() + 1);
    var plusTwo = new Date(hoveredDate);
    plusTwo.setDate(hoveredDate.getDate() + 2);
    var nowPlusThree = [hoveredDate, plusOne, plusTwo];

    var existingDates = $('#toDate').multiDatesPicker('getDates');
    $('#toDate').multiDatesPicker('removeDates', existingDates);
    $('#toDate').multiDatesPicker({'addDates': nowPlusThree});
});

Обратите внимание, что демонстрационная версия jsFiddle также включает jQueryUI Theme и плагин Multiple Dates Picker в соответствии с рекомендациями @ diEcho

1 голос
/ 22 декабря 2011

надеюсь, что эти ссылки будут полезны

multiple datepicker

здесь завершено демонстрационные списки

...