Calendar component date picker add onSelect function

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 🙂

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);

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!