Calendar component date picker add onSelect function

edited February 23, 2018 in Ideas
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

2
2 votes

Under Consideration ยท Last Updated

Comments

  • Zach McElrathZach McElrath Principal Software Engineer Chattanooga, TN ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited March 2, 2017
    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](field,skuid.utils.decodeHTML(arguments[1]));

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


  • edited February 23, 2018
    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.
  • Zach McElrathZach McElrath Principal Software Engineer Chattanooga, TN ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited December 21, 2016
    Ah I see, I forgot about the "Calendar component" part of your question :)
  • Matt SonesMatt Sones ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited February 23, 2018
    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?
  • edited November 10, 2016
    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
  • edited February 23, 2018
    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.
  • J.J. ๐Ÿ’Ž
    edited March 7, 2017
    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!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!