Несколько jQuery Datepickers несколько форм

Question

Несколько jQuery Datepickers несколько форм

0

Я использую несколько форм на одной странице. Все формы используют datepicker с теми же настройками. Поскольку я не могу использовать один и тот же ID для двух элементов, мне приходится копировать код. Есть ли лучший способ сделать это?

DEMO http://jsfiddle.net/Fa8Xx/1112/

     $("#datepicker1").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: 0,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            var d = new Date(selectedDate);
            d.setDate(d.getDate() + 90);
            $("#datepicker2").datepicker("option", "minDate", selectedDate);
            $("#datepicker2").datepicker("option", "maxDate", d);
        }
    });
    $("#datepicker2").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: +1,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#datepicker1").datepicker("option", "maxDate", selectedDate);
        }
    });
    $("#datepicker3").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: 0,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            var d = new Date(selectedDate);
            d.setDate(d.getDate() + 90);
            $("#datepicker4").datepicker("option", "minDate", selectedDate);
            $("#datepicker4").datepicker("option", "maxDate", d);
        }
    });
    $("#datepicker4").datepicker({
        defaultDate: "+1w",
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        minDate: +1,
        numberOfMonths: 1,
        onClose: function (selectedDate) {
            $("#datepicker3").datepicker("option", "maxDate", selectedDate);
        }
    });
    $("#datep

icker5").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#datepicker6").datepicker("option", "minDate", selectedDate);
        $("#datepicker6").datepicker("option", "maxDate", d);
    }
});
$("#datepicker6").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#datepicker5").datepicker("option", "maxDate", selectedDate);
    }
});
$("#datepicker7").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#datepicker8").datepicker("option", "minDate", selectedDate);
        $("#datepicker8").datepicker("option", "maxDate", d);
    }
});
$("#datepicker8").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#datepicker7").datepicker("option", "maxDate", selectedDate);
    }
});

adeneo 13 дек. 2013, в 17:56

Источник

0

Но у них нет одинаковых настроек, они все делают разные вещи, обновляют разные элементы и т.д.?
adeneo 13 дек. 2013, в 16:36
0

@adeneo, но они одинаковы для обеих форм. Я мог бы разрезать его как минимум пополам
user1320260 13 дек. 2013, в 16:43

Теги:

jquery

datepicker

5 ответов

0

Установите класс css для каждого из элементов и вызовите.datepicker() для этого класса. Например, $ (". DateField"). Datepicker ({...});

JimmyJay86 13 дек. 2013, в 15:02

0

Используйте обычный селектор имен классов вместо разных идентификаторов. Использование множественного идентификатора может использовать процессорное время.

$(".YourCommonClassName").datepicker({
//DataPicker parameters..
});

Vijayakumar Selvaraj 13 дек. 2013, в 14:27

0

Спасибо, но это не будет работать, так как в моем примере пользователь был отключен от выбора даты окончания раньше, чем дата начала. К сожалению, в ваших примерах отсутствует эта функция
user1320260 13 дек. 2013, в 16:41

0

Попробуйте использовать класс и назначьте datepicker соответственно вместо отдельных идентификаторов.

Я использовал четыре класса, потому что у вас есть разные варианты и разные действия в событии onClose.

Код:

$(".datepicker1").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#DateTo").datepicker("option", "minDate", selectedDate);
        $("#DateTo").datepicker("option", "maxDate", d);
    }
});
$(".datepicker2").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#DateFrom").datepicker("option", "maxDate", selectedDate);
    }
});
$(".datepicker3").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: 0,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $("#ReturnDate").datepicker("option", "minDate", selectedDate);
        $("#ReturnDate").datepicker("option", "maxDate", d);
    }
});
$(".datepicker4").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#OutwardDate").datepicker("option", "maxDate", selectedDate);
    }
});

Демо: http://jsfiddle.net/A6pe6/

Irvin Dominin 13 дек. 2013, в 14:12

0

Спасибо, но это не будет работать, так как в моем примере пользователь был отключен от выбора даты окончания раньше, чем дата начала. К сожалению, в ваших примерах отсутствует эта функция
user1320260 13 дек. 2013, в 16:41
0

Я не могу эту функциональность в вашем примере. Можешь показать мне это?
Irvin Dominin 13 дек. 2013, в 16:43
0

DEMO jsfiddle.net/Fa8Xx/1112, если вы выбираете дату из первого поля ввода, а затем пытаетесь выбрать дату из второго поля ввода. Это ограничит вас только будущими датами.
user1320260 13 дек. 2013, в 16:49

Показать ещё 1 комментарий

0

Вот демонстрация

Вы можете использовать класс:

<input type="text" class="datepicker" id="date_1" />
<input type="text" class="datepicker" id="date_2" />
<input type="text" class="datepicker" id="date_3" />

$(".datepicker").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    minDate: +1,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#OutwardDate").datepicker("option", "maxDate", selectedDate);
    }
});

Zaheer Ahmed 13 дек. 2013, в 13:51

0

Спасибо, но это не будет работать, так как в моем примере пользователь был отключен от выбора даты окончания раньше, чем дата начала. К сожалению, в ваших примерах отсутствует эта функция
user1320260 13 дек. 2013, в 16:41

Ещё вопросы

Но у них нет одинаковых настроек, они все делают разные вещи, обновляют разные элементы и т.д.?
@adeneo, но они одинаковы для обеих форм. Я мог бы разрезать его как минимум пополам
Спасибо, но это не будет работать, так как в моем примере пользователь был отключен от выбора даты окончания раньше, чем дата начала. К сожалению, в ваших примерах отсутствует эта функция
Я не могу эту функциональность в вашем примере. Можешь показать мне это?
DEMO jsfiddle.net/Fa8Xx/1112, если вы выбираете дату из первого поля ввода, а затем пытаетесь выбрать дату из второго поля ввода. Это ограничит вас только будущими датами.
Спасибо, но это не будет работать, так как в моем примере пользователь был отключен от выбора даты окончания раньше, чем дата начала. К сожалению, в ваших примерах отсутствует эта функция

adeneo · Accepted Answer · 2013-12-13T13-46-00.000Z

Поскольку все они разные, или, по крайней мере, close callback и mindate, вы можете определить общий объект настроек и использовать его во всех случаях, чтобы упростить

var settings = {
    defaultDate: "+1w",
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    numberOfMonths: 1
}
$(".datepicker1").datepicker($.extend(settings, {
    minDate: 0,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $(".datepicker2", $(this).closest('form')).datepicker("option", "minDate", selectedDate);
        $(".datepicker2", $(this).closest('form')).datepicker("option", "maxDate", d);
    }})
);
$(".datepicker2").datepicker($.extend(settings, {
    minDate: 1,
    onClose: function (selectedDate) {
        $(".datepicker1", $(this).closest('form')).datepicker("option", "maxDate", selectedDate);
    }})
);
$(".datepicker3").datepicker($.extend(settings, {
    minDate: 0,
    onClose: function (selectedDate) {
        var d = new Date(selectedDate);
        d.setDate(d.getDate() + 90);
        $(".datepicker4", $(this).closest('form')).datepicker("option", "minDate", selectedDate);
        $(".datepicker4", $(this).closest('form')).datepicker("option", "maxDate", d);
    }})
);
$(".datepicker4").datepicker($.extend(settings, {
    minDate: 1,
    onClose: function (selectedDate) {
        $(".datepicker3", $(this).closest('form')).datepicker("option", "maxDate", selectedDate);
    }})
);

FIDDLE

Я отредактировал свой jsfiddle, чтобы сделать его более понятным, спасибо, но это не сработает, так как в моем примере пользователь был отключен от выбора даты окончания раньше даты начала. К сожалению, в твоих примерах отсутствует эта функция, я думаю?
Мой текущий пример - DEMO jsfiddle.net/Fa8Xx/1112, если вы выбираете дату из первого поля ввода, а затем пытаетесь выбрать дату из второго поля ввода. Это ограничит вас только будущими датами.
О, я вижу, вы полностью изменили скрипку, я обновлю ответ