Объяснение:
Я создаю плагин для приложения, которое использует этот плагин Bootstrap Datepicker здесь http://www.eyecon.ro/bootstrap-datepicker/
Поэтому я пытаюсь использовать тот же плагин для Date Picker в моем плагине для приложения, которое уже использует эту библиотеку Date Picker.
Мое приложение - это приложение для управления проектами, которое показывает задачи проекта во всплывающем модальном окне. В модальном окне задачи есть поле Срок выполнения.
Я хочу показать значение срока выполнения для задачи при открытии модального окна. Когда пользователь щелкает текст существующего поля «Дата выполнения», я хочу открыть и показать встроенный календарь выбора даты. Так же, как ссылка на библиотеку выше!
Таким образом, пользователь нажимает на дату выполнения, чтобы открыть окно выбора даты. Затем они щелкают значение даты, которое отправляет AJAX-сообщение на сервер и сохраняет новое значение даты. Затем он должен обновить текст, по которому они изначально щелкнули, с новым значением даты, а затем скрыть / закрыть средство выбора даты.
Все довольно просто, но мне нужна небольшая помощь, пожалуйста!
У меня есть рабочая демонстрация JSFiddle: http://jsfiddle.net/jasondavis/dd1bmrrc/
Мой собственный код также показан ниже. Все, что отсутствует, - это библиотека Bootstrap Date Picker, jQuery, библиотека MockAjax и CSS. Однако все это загружено на указанный выше JSFiddle.
Вы также можете увидеть некоторые параметры на странице проекта Date Pickers здесь http://www.eyecon.ro/bootstrap-datepicker/
Проблема
На моей демонстрационной странице http://jsfiddle.net/jasondavis/dd1bmrrc/ вы увидите, что я иметь диапазон, содержащий значение даты.
Рядом с ним находится текстовый ввод, при нажатии на который отображается календарь выбора даты.
После выбора даты мой диапазон обновляется, а средство выбора даты скрывается.
При повторном щелчке по моему диапазону отображается текстовое поле «Выбор даты».
Затем вам нужно щелкнуть текстовое поле, чтобы увидеть календарь выбора даты.
Итак, моя цель - не использовать текстовое поле. Значение Span должно открывать и закрывать Datepicker без необходимости существования текстового поля!
Это вообще возможно?
Код
HTML:
<span id="due-date-span">1/1/2015</span>
<input type="text" class="span2" value="02-16-2012" id="task-due-date-cal">
JavaScript для выбора даты:
$(function(){
// Show Date Picker Calaendar when "Due Date" SPAN text is clicked on:
$('#due-date-span').on('click', function(){
$('#task-due-date-cal').show();
});
// Instantiate and run Date Picker Calendar plugin
var dueDatePicker = $('#task-due-date-cal').datepicker({
format: 'mm-dd-yyyy',
// When Date Picker Date is clicked on to change a Date value:
}).on('changeDate', function(ev){
dueDate = new Date(ev.date);
// Make AJAX POST to save Due Date value to the server and update DOM.
$.ajax
({
type: "post",
url: "updateDueDate",
data: "date="+dueDate,
success: function(result)
{
// UPDATE SPAN #due-date-span with new Date value
$('#due-date-span').text(dueDate);
// Close/Hide Date Picker, until it is clicked to show again
$('#task-due-date-cal').hide();
$('#task-due-date-cal').datepicker('hide');
}
});
});
});
Мок-запрос AJAX для демонстрации:
// Mock AJAX response for AJAX request to /updateDueDate to Update In-line Task Due Date Fields
$.mockjax({
url: '/updateDueDate',
responseTime: 900, // simulate lag
response: function(settings) {
//console.log(settings.data);
console.log('info', 'UPDATE TASK FIELD AJAX REQUEST SENT', settings.data);
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
