Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.
Take a look at this : Issue 167: Mini Calender to control Main Calender.
Or make the combination with following example :
$(document).ready(function() {
$("#fullcalendar").fullCalendar({
// .....
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
}
<div id="fullcalendar"></div>
<div id="datepicker"></div>
The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date
This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button
customButtons: {
gotoDate: {
text: 'Go to date',
click: function () {
$(this).datepicker({
autoclose: true
});
$(this).datepicker().on('changeDate', function (e) {
$('#fullcalendar').fullCalendar('gotoDate', e.date);
});
$(this).datepicker('show');
}
},
},
footer: {
'center': 'gotoDate'
},
Related
I've placed a kendo DateTime Picker on a web page.
According to the requirement initially it should display only date and if user needs then he/she can select the time as well.
Below is the code which initially fill the kendo datetime picker:
<input id="txtDate" type="text" maxlength="10" style="width: 250px;" value="" />
<script type="text/javascript">
$('#txtDate').kendoDateTimePicker({ value: new Date() });
</script>
The above code fill date and time. But i want to fill only current date.
I tried with the following code to check if it can fill only date. But it adds the 12:00 AM with date.
$('#txtDate').kendoDateTimePicker({ value: new Date('04/30/2017') });
Is there any way to fill only date in Kendo DateTime picker?
What you are looking is kendoDatePicker, which will allows user to select only date.
$(document).ready(function()
$("#txtDate").kendoDatePicker();
});
Edit: or add formatting property to kendoDateTimePicker, which will effect how value is displayed for user.
$('#txtDate').kendoDateTimePicker({
value: new Date(),
format: 'MM/dd/yyyy'
});
If you never need to display the time one possible option might be to store the datetime value as an attribute of the current widget and on the submit event of the form manually ovverride the values:
<script>
$(document).ready(function () {
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
change: function(data){
data.sender.element.attr("value", data.sender.value());
}
});
});
$("form").on("submit", function(){
$("input").each(function(){
var inputValue = $(this).attr("value");
if(inputValue){
$(this).val(inputValue);
}
});
})
</script>
If you want to display the time after the user pick a time you can change the format of the widget subscribing a function to the open event:
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
format: "yyyy/MM/dd",
value: new Date(),
open: function(e){
if(e.view == "time"){
this.setOptions({format: "yyyy/MM/dd HH:mm"})
}
if(e.view == "date"){
this.setOptions({format: "yyyy/MM/dd"})
}
}
});
You can build on the answers given above and detect when a time is selected then reapply a display format in javascript.
Via jQuery:
$('#txtDate').datetimepicker({
format: 'L'
});
Instead of using Kendo.DateTimePickerFor you can use DatePickerFor.
This way you can get rid of hour part.
#(Html.Kendo().DatePickerFor(model => model.StartDate).HtmlAttributes(new { #class = "form-control" , required="required"}))
I have an application with all the drop down boxes customized by select2 plugin, obviously like this:
$("select").select2();
However, the select element on a jquery datepicker is not customized. And I couldn't figure out where to initialize this in the jquery datepicker function. The following is what I want to achive. I want a function that can replace init that can get the datepicker dom element.
$(".datepickerInput").datepicker({
init : function(datepickerElement) {
datepickerElement.find("select").select2();
}
});
I appreciate your help. Thanks.
The issue you are facing is that Datepicker doesn't have a "after show" callback function. That is, there is no available method/option that can run code after the datepicker has been showned.
There is some discussion and some possible answers in jQuery Datepicker "After Update" Event or equivalent
So, for now, you can make that work by extending Datepicker, like this:
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function() {
// Code from the related question. Used the answer from #Markus
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
// Now that we have `afterShow`, we can initialize Select2.
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
afterShow: function() {
$(".ui-datepicker select").select2();
}
});
});
</script>
I am using jquery-ui-1.10.4.js and ASP MVC.
In my View I am accepting an optional date as input;
#Html.EditorFor(model => model.Assessment.SsipAccreditationDate)
I have an Editor Template which injects the datepicker class;
#model DateTime?
#Html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty),
new { #class = "datePicker", #style = "width:200px;" })
I have jquery code to hook up the datepicker with the date field;
if ($(".datePicker").length) {
$(".datePicker").datepicker({ showOn: 'both', dateFormat: constantDateFormat, changeMonth: true, changeYear: true })
.next('button.ui-datepicker-trigger')
.attr("tabIndex", "-1");
}
When the View is loaded, if this date field is empty the datepicker automatically displays. What I would prefer would be for the datepicker to only be displayed if the user clicks on it or the associated button. This is what the showOn: Both configuration is meant to acheive.
Notice in the jquery the tab index is set to -1, so the reason for the datepicker showing cannot be to do with the field in focus.
So how do I stop the datepicker showing when the View is loaded?
You can disable it by using defaultDate attribute.
$(".datePicker").datepicker({
defaultDate: ''
})
I do not think this is the best answer, but I found I could do this by disabling the datepicker initially, and then enabling it once it has been clicked on;
$(document).ready(function () {
initialiseEdit();
});
var initialiseEdit = function () {
// Disable the datepicker to ensure the datepicker is not shown when the page is loaded
$('#Assessment_SsipAccreditationDate').datepicker("disable");
// Class to stop the control from looking disabled
$('#Assessment_SsipAccreditationDate').addClass('inputBox');
};
// This code is to make the datepicker function as though it is enabled, whether it is or not.
$('.clickEnable').click(function () {
$('#Assessment_SsipAccreditationDate').datepicker("enable");
$('#Assessment_SsipAccreditationDate').datepicker("show");
});
Because '#Assessment_SsipAccreditationDate' is disabled, I had to wrap it with a span containing the clickEnable class and put the click event on that.
My jQuery datepicker only closes when picking a date, but I want it to close when the user clicks away from or on the close button. However, even with the showButtonPanel option set to true, the close button does not appear but the 'Today' button does.
I think it may have something to with having a custom onSelect action instead of the default but can't figure out how to close it myself. Tried using $.datepicker('hide') and ('destroy') but no difference.
$(document).ready(function() {
$.datepicker.setDefaults({firstDay: 1, dateFormat: 'dd/mm/yy', showAnim: 'fade'});
});
$(document).delegate('.editEndDate', 'click', function() {
$('.formattedEndDate').datepicker({
defaultDate: $('.formattedEndDate').attr('id'),
onSelect: function(dateText, inst) {
var date = dateText;
var data = 'project=' + projectId + '&date=' + date + '&dateToChange=end';
$.ajax({
type: 'POST',
url: 'helpers/change-project-date.php',
data: data + '&ajax=1',
success: function(response){
getNotification(response);
$('.formattedEndDate').fadeOut(function() {
$(this).load(location.href+ ' .formattedEndDate', function() {
$(this).fadeIn('slow');
});
});
},
error: function(response){
getNotification(response);
},
complete: function(response){
$('.formattedEndDate').datepicker('hide');
}
});
}
});
return false;
});
It may be something simple but I just can't see it. Thanks in advance.
I may have found a solution to my own problem...
$('.ui-datepicker').live('mouseleave', function() {
$('.ui-datepicker').fadeOut(function() {
$('.formattedStartDate').attr('class', 'formattedStartDate');
$(this).remove();
});
});
This works for me, hopefully it'll work for others too.
Everything blew up when I tried to use live. So I had to use on. I also added in input focus hide. So if you happen to focus on a different field the calendar isn't just hanging around. I also just did hide, but you should be able to switch it for fade if that is what you are wanting.
$('.bootstrap-datetimepicker-widget').on('mouseleave', function () {
$(this).hide();
})
$('input').on('focus', function () {
$('.bootstrap-datetimepicker-widget').hide();
});
I'm using the JQuery DatePicker as a little Calendar Dashboard, marking dates with "agenda items" (events, office closed, meetings ...).
The dates are marked and clickable, but now I'd like to navigate to the "Day Detail" when the user clicks on one of the dates.
Here's what I have so far, but I'm missing (see ???) how I can append the selected date to the Url.Action method:
$(document).ready(function() {
$("#eventCalendar").datepicker({
numberOfMonths: 3,
beforeShowDay: highlightDays,
onSelect: function(date, instance){
window.location = '<%= Url.Action("Items", "Calendar", new { date = ???}) %>';
}
});
});
window.location = '<%= Url.Action("Items", "Calendar") %>?date=' + encodeURIComponent(date);