Как реализовать календарь, с возможностью ввода

Добрый день.
Прошу совета, как реализовать календарь, с в каждой дате.
Т.е. у меня есть график поставок, который люди заполняют. Я хочу, чтобы они видели сразу календарь, и при нажатии на дату куда они хотят вставить поставку, появлялось поле, в которое они вобьют объем. После того, как они вобъют весь график в календарь(выберут 10-20 дат, которые могут быть в разные месяцы, и вобьют в них объемы), нажимают на кнопку отправить и там уже обработчик заведет все в базу данных(с этим проблем нет).
Подскажите, используя какую библиотеку такое было бы проще всего реализовать(Jquery UI Datepicker?)
Заранее благодарен.

P.S. Нашел похожий скрипт, на то, что мне надо (Booking Calendar PRO (jQuery Plugin), но он платный $7 и такое ощущение, что заточен под wordpress, а перетачивать не очень хочется codecanyon.net/item/booking-calendar-pro-jquery-plugin/full_screen_preview/244645?ref=themespotters

GrinRom

06 марта 2015, 08:37

2 710

Комментарии: 5

Fducho Santos Старожил

06 марта 2015, 12:12

Подскажите, используя какую библиотеку такое было бы проще всего реализовать(Jquery UI Datepicker?)

Посмотрите: fullcalendar.io/

GrinRom Старожил

06 марта 2015, 12:24

Сейчас попробуем, спасибо

GrinRom Старожил

06 марта 2015, 14:12

Отличный вариант оказался, спасибо большое)

Alexander V Проверенный

06 марта 2015, 13:07

getuikit.com/docs/datepicker.html не знаю, подойдёт или нет, но это самый простой вариант

GrinRom Старожил

06 марта 2015, 14:12

Может кому пригодится)))

dayClick: function (date, jsEvent, view) {
                    // alert ($(this).closest('.tr_calendar').data('id'));

                    if ($(this).data('disabled') !== '1') {
                        var date = date.format();
                        $(this).data({'disabled':'1'});
                        $(this).append('' +
                        '<form>Объем ожидаемой поставки: <div class="input-append">' +
                        '<input class="add_graph_input" type="text" name="value"/><span class="add-on">м³</span></div>' +
                        '<input type="hidden" name="id_post" value="' + $(this).closest('.tr_calendar').data('id') +
                        '"><input type="hidden" name="date" value="' + date + '"></form>');

                        //alert('Clicked on: ' + date.format());

                        //alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);

                        //alert('Current view: ' + view.name);

                        // change the day's background color just for fun
                        $(this).css('background-color', 'lightblue');
                        $(this).find('.add_graph_input').focus();
                    } else {
                        $(this).find('.add_graph_input').focus();
                    }

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Как реализовать календарь, с возможностью ввода

Job Piper собирает IT заказы со всего Интернета.

Комментарии: 5