Jquery Datepicker в нескольких полях и сохранение входных данных - PullRequest
Новая
       28

Jquery Datepicker в нескольких полях и сохранение входных данных

0 голосов
/ 23 ноября 2018

Я все еще учусь, и мой новый проект застрял на этом:

Внутри таблицы для управления клиентами я хочу иметь поле ввода с датчиком (https://longbill.github.io/jquery-date-range-picker/, используяэто) для каждой строки, например: 

<td>
//some more content
    <div class="includeDatepicker">
        <input type="text" class="datepicker">
    </div>
</td>

все настроено так: 

jQuery("document").ready(function () {
    jQuery('.datepicker').dateRangePicker({
    autoClose: true,
    singleDate : true,
    showShortcuts: false,
    singleMonth: true,
    startOfWeek: 'monday',
    separator : ' ~ ',
    format: 'DD.MM.YYYY HH:mm',
    time: {
        enabled: true
    }
});
});

Пока здесь все работает нормально.Тогда, хотя:

  1. Средство выбора даты отображается только для первого поля ввода в первой строке таблицы и будет отображаться только там, даже если щелкнуть остальные.Что я могу сделать, чтобы добавить указатель даты в каждое поле ввода?Я уже использую селектор класса.Я провел свое исследование по этому вопросу и нашел некоторые решения, но я не могу по-настоящему обдумать это в любом случае.

  2. Как могло бы получиться, чтобы дата, записанная в поля ввода, сохранялась даже при обновлении страницы?

Я был бы очень признателен за любую помощь, и я провел исследование, прежде чем спрашивать здесь, но ничего из этого не принесло большой пользы.

Привет

1 Ответ

0 голосов
/ 23 ноября 2018

Я думаю, что для 2-й части такой подход выглядит следующим образом: 

jQuery("document").ready(function () {
    jQuery('.datepicker').dateRangePicker({
    autoClose: true,
    singleDate : true,
    showShortcuts: false,
    singleMonth: true,
    startOfWeek: 'monday',
    separator : ' ~ ',
    format: 'DD.MM.YYYY HH:mm',
    time: {
        enabled: true
    }
},function(start, end, label) {
    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));
}
    );
});

Внутри этой функции вы могли бы затем сделать AJAX-вызов к БД, но, как я уже говорил ранее, вам понадобится некоторый идентификатор для элемента, так чтовы можете передать его обратно на уровень обслуживания, чтобы убедиться, что вы знаете, какую сущность они обновляют ....

Я не уверен, какой инструмент выбора диапазона дат вы используете, но если тот, который я думаю, то достаточнопримеры @ http://www.daterangepicker.com/#options

Добавить новую функцию, например: 

function updateDBWithVals(urlToServer,startDateFromFrontEnd,endDateFromFrontEnd,rowID) {    
    return $.ajax({
            url:            urlToServer,
            data:           {startDate : startDateFromFrontEnd, endDate: endDateFromFrontEnd, entityID: rowID},
            type:           "POST",                         
            success:        function(response) { 
                                    console.log(response);
                            },
            error:          function(error) {
                                console.log(error);
                            }
        }); 
}

Теперь в функции обратного вызова просто вызовите ее, т.е. 

function(start, end, label) {
    console.log(start.format('YYYY-MM-DD') + ' TO: ' + end.format('YYYY-MM-DD'));
    updateDBWithVals("urlToYourServerLogic",start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'),"theIDOfTheRow");
}
...