I am using kendo date picker widget inside our software application. However, for our specific feature, I would like to be able to select "more than one date" inside the date picker widget.
By default, as soon as you change the selected date inside the widget, the widget automatically sets the newly selected date and then triggers the default "close" event of the widget and hence, it closes automatically. Therefore, I am not able to handle the "close" event manually and hence, the "change" event as well. An example of a simple kendo date picker is as under:
$("#inputDateTimePicker2").kendoDatePicker({
format: "yyyy-MM-dd",
change: function (e){
var newValue = kendo.toString(e.sender.value(), "yyyy-MM-dd");
},
close: function(e){
//code to handle the close event.
}
});
Is there a good way to achieve this functionality inside the kendo date picker widget.
It would be very helpful.
Related
Is there a way to deselect selected by user day in Pikaday calendar?
I would like to get from this state
to the following one
You could set the pickers date to null using .setDate(null) and attaching a listener to a button you press as described in the documentation to clear the selected date.
I'm using jquery full calendar version 2.2. My event has editable : true property. But If I dragged it to another day, event's start date or end date does not update. Why is that? Are there any property to do it?
I created a demo to show the issue I am having using a jQuery library called Zebra-Datepicker.
Zebra-Datepicker documentation: http://stefangabos.ro/jquery/zebra-datepicker/
Zebra-Datepicker GitHub: https://github.com/stefangabos/Zebra_Datepicker
My demo shows how to:
create a DatePicker instance,
select a date value,
destroy the date picker instance,
create a new instance of the date picker,
select a new date value....
Problem:
The problem is that destroying the DatePicker does not seem to destroy the previous selected date value! So when instantiating a new DatePicker, it has the previous Date value selected instead of a new value!
I could really use some expert help as this is crucial for me to fix for my project which loads Project Task records into a Modal DIV. My Task records all share the HTML in the DOM of a single Modal, just replacing placeholder variables for a Task and then re-setting them when Modal is closed for the next Task to do the process over and over.
My Demo JSFiddle: http://jsfiddle.net/jasondavis/Lqwfamoc/17/
If you follow these steps on my demo you will see what I mean...
Click on Date SPAN to reveal DatePicker calendar and click on date 2015-05-30
Click Destroy DatePicker button
Click on Date Span which will then show DatePicker is missing since we destroyed it.
Now click on UPDATE DatePicker to 2015-05-24 Button which will set the Date SPAN value to have a new date of 2015-05-24. When we instantiate the DatePicker plugin again, it should grab this new date value in the SPAN and set the DatePicker to this date!
Now click Build New DatePicker button which instantiates a new DatePicker
Now click the Date SPAN text: 2015-05-24 to show the DatePicker Calendar again
You should now see that the original 30th day 2015-05-30 is selected in the DatePicker even though it SHOULD now have our Date value of 2015-05-24 selected instead since we destroy() and re-instantiated a new DatePicker after Destroying the old one!
Apparently, the Destroy method didn't full destroy or something else is going on? Any ideas on how to fix this?
The sourcecode of the actual Zebra-Datepicker lIbrary's destroy() method:
Located here
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469
/**
* Destroys the date picker.
*
* #return void
*/
plugin.destroy = function() {
// remove the attached icon (if it exists)...
if (undefined !== plugin.icon) plugin.icon.remove();
// ...and the calendar
plugin.datepicker.remove();
// remove associated event handlers from the document
$(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
$(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
$(window).unbind('resize.Zebra_DatePicker_' + uniqueid);
// remove association with the element
$element.removeData('Zebra_DatePicker');
};
I found the problem. You need to change this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24');
});
to this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
});
The reason is that when you rebuild a new DatePicker control, it is looking at the value of the span, not the text of the span. (Note: Normally you would attach a DatePicker to an "input" element, not a "span" element.)
Here is my JSBin. Essentially, when programmatically setting the value of a Kendo DatePicker within a custom popup editor template, the value does not unbind back to the data source. Do I need to be calling additional methods to ensure the value unbinds when setting it in this way?
My JSBin
The solution was to trigger the Kendo UI change event per the below.
function setDate(e)
{
var datePicker = $("#DateCreated").data("kendoDatePicker");
datePicker.value(new Date());
datePicker.trigger("change");
}
So what I am trying to accomplish is what most Hotel or Airport sites have in general, after you've chosen a date for your arrival when clicking on the next calendar it automatically updates the calendar dates to the same month in which you chose your arrival.
See: http://hotelsaxchicago.com
I currently have jQuery UI and it's calendar plugin for a casino/hotel site: http://staging.comanchenationcasinos.com
Is there away to do something similar on here? How can I detect what's already in the input field without actually clicking the submit button.
At the same time, how can I trigger the calendar if someone clicks on the icon instead?
Thanks ahead of time.
What I usually do for the calendar link next to the input is something like
$('body').on('click', '.calendar_icon', function(){
$(this).prev('input[type="text"]').focus();
return false;
});
That will drop the focus onto the text input sitting previously in the markup.
Regarding the date resetting, try something like this:
Assuming you have the first input with the id of first_date and the second as second_date...
$('body').on('change', '#first_date', function(){
var this_date = $(this).val();
$('#second_date').datepicker("setDate", new Date(this_date) );
});
Worth noting, you could also attach the two date pickers with data-next-datepicker="#something" to make it really specific if you'd rather not use #second_date. I'd go that route if you had a series of dates on the page.