在FullCalendar中添加datePicker /自定义按钮点击
在FullCalendar中添加datePicker /自定义按钮点击
提问于 2016-06-28 04:12:53
我在FullCalendar (http://fullcalendar.io)页面的正下方添加了一个datePicker (http://www.eyecon.ro/datepicker/)。
如何将此日期选择器附加到fullcallendar标题上的自定义按钮，当按下该按钮时，日期选择器将显示出来？
谢谢
更新:添加代码
编辑:代码已更新
到目前为止，我编写的代码是: JS：
$(function () {
//...some code.....
//fullcalendar
$('#calendar').fullCalendar({
//...options
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
$('#calendar').fullCalendar('gotoDate', formated);
}
});
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$ASP：
<div>
<div id='calendar'></div>
</div>
<div>
<p id="date"></p>
</div>回答 2
Stack Overflow用户
发布于 2016-06-28 18:08:28
你有没有看过全日历的自定义按钮？
您应该能够这样做：
$(function () {
//... some code....
// for the date picker
$('#date').DatePicker({
flat: true,
date: currentDate,
current: currentDate,
calendars: 2,
starts: 1,
onChange: function (formated, dates) {
//when user clicks the date it scrols back up
$('#calendar').fullCalendar('gotoDate', formated);
$('body,html').animate({
scrollTop: 0
}, 800);
$('#date').DatePickerHide();
}
});
$('#calendar').fullCalendar({
header: {
left: 'title today',
center: '',
right: 'prevMonth prev myCustomButton next nextMonth'
},
customButtons: {
myCustomButton: {
text: ' ',
click: function () {
//it scrolls to the position of the datepicker
$('body,html').animate({
scrollTop: $(document).height()
}, 1000);
$('#date').DatePickerShow();
}
},
//...other buttons
},
//....other options....
});//fullcalendar
});//$Stack Overflow用户
发布于 2016-08-25 17:39:33
我正在尝试做同样的事情:将jquery datepicker添加到完整的日历自定义按钮中。有人知道怎么做吗？
我能做的最好的事情就是声明两者，一个在另一个之上，并将日期选择器选择事件链接到完整的日历更新视图事件(参见下面的示例)。它工作得很好，但我想要的是在完整的日历自定义按钮中声明datepicker，而不是在div中声明。
感谢您的反馈！
我正在做的示例：
$(document).ready(function () {
$('#datepicker').datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: " ",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
$('#datepicker').datepicker("show");
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
});
(...)
<p>Date <input type="text" id="datepicker"></p>
<div id='calendar'></div>稍后：
感谢：This github fullcalendar issue，我已经能够有一个日期选择器到完整的日历标题自定义按钮。
下面是如何继续操作：
$(document).ready(function () {
$('#calendar').fullCalendar({
timezone : 'local',
height:750,
theme: true,
businessHours: true,
editable: true,
customButtons: {
datePickerButton: {
themeIcon:'circle-triangle-s',
click: function () {
var $btnCustom = $('.fc-datePickerButton-button'); // name of custom button in the generated code
$btnCustom.after('<input type="hidden" id="hiddenDate" class="datepicker"/>');
$("#hiddenDate").datepicker({
showOn: "button",
dateFormat:"yy-mm-dd",
onSelect: function (dateText, inst) {
$('#calendar').fullCalendar('gotoDate', dateText);
},
});
var $btnDatepicker = $(".ui-datepicker-trigger"); // name of the generated datepicker UI
//Below are required for manipulating dynamically created datepicker on custom button click
$("#hiddenDate").show().focus().hide();
$btnDatepicker.trigger("click"); //dynamically generated button for datepicker when clicked on input textbox
$btnDatepicker.hide();
$btnDatepicker.remove();
$("input.datepicker").not(":first").remove();//dynamically appended every time on custom button click
}
}
},
// header
header: {
left: 'prev,next today datePickerButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38062449
复制相关文章
相似问题