Calendar component date picker add onSelect function

Hello everyone

We are still working with the skuid calendar component. We had to display multiple calendars at once (All Day Events and Normal Events) because they display a different daterange. However, we need to connect them together, so they always display the same daterange.

We already got it working for the previous and next day/week/month buttons. But we also had to expose the normally hidden datepicker for quick navigation and there lies my problem. A selected Date will not notify any listeners to changes it has made.

Therefore my intention was to add a jQuery datepicker onSelect function to fire off a function which sets the second calendar on the same date, as well as firing off a snippet i need for a different purpose every time i select a new date with the datepicker.

However, my onSelect function does not seem to get accepted at all.

$.datepicker.onSelect(function(dateText, inst){ console.log("debug"); });


Would be really neet, if we had some way to kick off actions when someone changes the date

Matthias,

Because Skuid uses the onSelect function internally when we instantiate Datepickers, your best bet right now is to use a Custom Field Renderer, in which you run the default renderer, then find the Datepicker input and extend the existing onSelect function. It is essential to extend the current onSelect function because otherwise Skuid’s default behaviors will not be run. 

I am converting this to an Idea, because ideally we would (a) publish an Event whenever a Datepicker date is selected (b) allow for a sequence of Actions to be defined that would be run whenever the Date is selected. 

But in the meantime, here is an unsupported temporary workaround that will allow you to do this via a Custom Field Renderer. If you create a new snippet, and use this Snippet as the Custom Field Renderer for your Date/Datetime input field, and use this as the body, it should let you do what you need to do:

var field = arguments[0];    
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;

if (field.mode === ‘edit’) {
    var input = field.element.find(‘.hasDatepicker’);
    var currentOnSelect = input.datepicker(‘option’,‘onSelect’);
    input.datepicker(‘option’,‘onSelect’,function(dateText,inst){
        currentOnSelect.apply(input,arguments);
        console.log(‘date selected’,dateText);
    });
}


Thanks for the effort Zach, I’m afraid this does not fix my problem as far as i can see. Since the Rendersnippet can be applied to Datepicker - Fields inside a table. However, we made the datepicker that’s built in the calendar visible to the public, but there we can’t simply add a render snippet.

Ah I see, I forgot about the “Calendar component” part of your question :slight_smile:

It’s a workaround for a workaround, but could hide the calendar component’s datepicker with jquery, and then add a date field in a field editor to run the custom renderer?

Guess we have to resort to this Matt, the biggest downer there is, we have quite a bunch of scripts interacting with the date picker at the moment and i’m concerned if we can do it without breaking those scripts.

But guess it’s my best bet if i can’t get the rendersnippet to work for the calendar datepicker

If someone else wants to include custom onSelect on his Datepicker (in Calendar), Karen Waldschmitt from Skuid had a quite simple Solution to it:

Add this in an Inline or StaticResource JS resource:

(function(skuid){
var $ = skuid.$;
$(document.body).one(‘pageload’,function(){
var calendarComponent = skuid.$C(‘MyCalendarComponent’),

// Reference to the internal “Calendar” object
calendar = calendarComponent.element.data(‘object’),


// Get the calendar’s date input
dateInput = calendar.datenav,


// The original datepicker “onSelect” method
currentOnSelect = dateInput.datepicker(‘option’,‘onSelect’);


dateInput.datepicker(‘option’,‘onSelect’,function(dateText,inst){
// Run the original “onSelect” method
currentOnSelect.apply(dateInput,arguments);

// Do custom actions here
console.log(‘date selected’,dateText);
console.log(‘datepicker instance’,inst);
});
});
})(skuid);



Assumption: the calendar has a unique id of MyCalendarComponent. If it’s something different, you’ll need to modify that bit.

Matthias,

That will work, but here’s a slight change that makes it a little more generic (doesn’t depend on low-level, undocumented Calendar APIs). As before, MyCalendarComponent is the unique id of your calendar component:

(function(skuid){ var $ = skuid.$; $(document.body).one('pageload',function(){ var calendarComponent = skuid.$C('MyCalendarComponent'), // Get the calendar's date input dateInput = calendarComponent.element.find('input.hasDatepicker'); if (dateInput.length){ // The original datepicker "onSelect" method var currentOnSelect = dateInput.datepicker('option','onSelect'); dateInput.datepicker('option','onSelect',function(dateText,inst){ // Run the original "onSelect" method currentOnSelect.apply(dateInput,arguments); // Do custom actions here console.log('date selected',dateText); console.log('datepicker instance',inst); }); } }); })(skuid);

Include that script as an Inline or StaticResource JavaScript resource. As Zach said though, this is an unsupported custom JavaScript solution. Hope that helps!