Render date field as TEXT with day of week, but use Datepicker to select date

  • 1
  • Question
  • Updated 4 years ago
Is it possible to add a datepicker to a date field that I'm rendering as TEXT?

I have a date field, and I'm using this custom renderer to render it as the text of the weekday:

var field = arguments[0],    model = field.model,
    condition = model.getConditionByName('Date'),
    value = condition.value,
    d = (value == 'TODAY') ? new Date() : skuid.time.parseSFDate(value);
$ = skuid.$;
var weekday = new Array(7);
weekday[0]=  "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var value = weekday[d.getDay()];
skuid.ui.fieldRenderers.TEXT.read( field, value );

I'd like to be able to use a datepicker to also select the date.

This will get tricky, because you'll note I'm getting the value from a condition, not the field value, so I'll have to set the value of the condition based on what's selected by the datepicker. Perhaps there's a different way?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
i tried to give the field the CSS class "datepicker" (can't give a field a unique id in mobile builder) and add an inline javascript resource as follows, with no luck:

(function(skuid){	var $ = skuid.$;
$(function(){
        $( ".datepicker" ).datepicker();
});
})(skuid);
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Matt,  our field renderers have "modes"  that allow you to branch your code based on whether the field is in Edit mode or Read only mode.  This Tutorial has an example that shows different UI based on mode.  I think you should be able to extend it to handle your use case. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Nice. That should work. I think I'll need to use a model action to update the value of the condition when the field changes, yes?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I think I'm going to need a bit more direction. i was trying the model condition route to update several conditions based on the new value selected by the user, but wasn't getting very far. Here's the current attempt to handle everything in a render snippet.

var field = arguments[0],    value = arguments[1],
    model = field.model,
    condition = model.getConditionByName('Date'),
$ = skuid.$;
if (field.mode == 'read') {
    var cv = condition.value;
    var d = (cv == 'TODAY') ? new Date() : skuid.time.parseSFDate(cv);
    var weekday = new Array(7);
    weekday[0]=  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";
    
    var value = weekday[d.getDay()];
    
    skuid.ui.fieldRenderers.TEXT.read( field, value );
} else if (field.mode == 'edit') {
    skuid.ui.fieldRenderers.DATE.edit( field, value );
    
    if (model.hasChanged) {
        //update model conditions
        model.setCondition(condition, value);
        modelO = skuid.$M('Open');
        modelO.setCondition(modelO.getConditionByName('OpenDate'), value);
        modelA = skuid.$M('ApptInteractions');
        modelA.setCondition(modelA.getConditionByName('Date'), value);
    }
}
I have the field set to read with inline editing. In read mode initially, it displays the day of the week as desired. When I double-tap to enter edit mode, I get a datepicker as expected. Trouble is, when I change the value I'm getting arguments[1] = null passed to the snippet. I'm also getting condition.value = null.

Is there a better way to handle this?
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Matt, going back and reading your use case - I think there is a far simpler way.  Look at this forum post:  https://community.skuidify.com/skuid/topics/adjust-display-format-of-date-and-date-time-fields

Because our date picker is build on the jQueryUI date picker widget,  all the possible customization to that widget are available for you.   The post above shows how to limit the date shown.  I think you can extend it to only show the Day.  You don't need to render it as text.  You just need the date picker to limit its "read mode" display to the weekday. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Rob,

Thanks for the tip.

The problem I'm running into is that I'm basically trying to allow the user to interact with the value of a condition directly. What's the best way to take the new value of the field when the user changes it and set that as the new value for a condition?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Yes, Pat. I'd love to use a table filter... except I'm building a mobile page, which doesn't have tables.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I see. Ok. How about creating an event listener on this field/element so as to update the condition when it changes?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Yeah, I'm trying to use this model action, but it's not working:

<model id="Date" limit="0" query="true" createrowifnonefound="true" doclone="" sobject="Reoccurance__c">         <fields>
            <field id="Timeless_Date__c"/>
            <field id="Start__c"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="TODAY" enclosevalueinquotes="false" operator="=" state="filterableon" field="Timeless_Date__c" inactive="false" name="Date"/>
         </conditions>
         <actions>
            <action>
               <actions>
                  <action type="setCondition" model="Open" condition="OpenDate" value="{{Start__c}}"/>
                  <action type="setCondition" model="ApptInteractions" condition="Date" value="{{Start__c}}"/>
                  <action type="setCondition" model="Date" condition="Date" value="{{Start__c}}"/>
                  <action type="requeryModels" behavior="standard">
                     <models>
                        <model>Open</model>
                        <model>ApptInteractions</model>
                     </models>
                  </action>
               </actions>
               <events>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>Start__c</field>
               </fields>
            </action>
         </actions>
      </model>
One thought I just had... I'm mixing types here. Start__c is a Datetime, and Timeless_Date__c is a Date.

Is there a way to create an event listener in javascript instead of will a model action?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I'd create a model that creates a new row on page load in the object you are working with without ever saving the row. This way you can put a Deck together where you have this date field you've put together with custom rendering working just as you'd like, but then add code something like the following in order to manipulate the condition(s) of other models.
(function(skuid){
	var $ = skuid.$;
	$(function(){
        // look for changes to the model
        var yourModel = skuid.$M('yourModel'),
            dateFieldListener = new skuid.ui.Editor();
            
            dateFieldListener.handleChange = function(){
            
        	var yourRow = yourModel.getFirstRow(),
        	    dateValue = yourModel.getFieldValue(yourRow,'Date__c');
        	
        	// update the conditions with dateValue
            /* Do Stuff Here */
            
        };
        dateFieldListener.registerModel( yourModel );
	});
})(skuid);
You'll need to add this into inline JS.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Ok--Here's what I've got:

(function(skuid){	var $ = skuid.$;
$(function(){
        // look for changes to the model
        var model = skuid.$M('Date'),
            dateFieldListener = new skuid.ui.Editor();
            
            dateFieldListener.handleChange = function(){
            
            var row = model.getFirstRow(),
               datetimeValue = model.getFieldValue(row,'Start__c'), jsDate = skuid.time.parseSFDateTime(datetimeValue), dateValue = skuid.time.getSFDate(jsDate);
           
            // update the conditions with dateValue
                var mO = skuid.$M('Open'),
                    mA = skuid.$M('ApptInteractions');
                mO.setCondition(mO.getConditionByName('OpenDate'), dateValue);
                mA.setCondition(mA.getConditionByName('Date'), dateValue);
                
                mO.updateData();
                mA.updateData();
            };
        dateFieldListener.registerModel( model );
});
})(skuid);


I'm getting strange behavior... strange in that I can no longer double-tap the field to edit it. So I can't change the date at all. No javascript errors. Am I doing something wrong here?

The next and previous buttons still work.
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Here's the page I'm working on:


It's a list of appointments (open and scheduled are in two different models) for the selected date. The arrow buttons set the value for the conditions to previous/next day and requery the models, which works great. What I'm trying to do is allow the user to select a different date to display via a datepicker (and if I can use the same field to show the Day of the filter, that would be great).

This seems like something Skuid can do... I just haven't muddled through it correctly yet.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Ok, I'm using the event listener described by Pat above, but now I cannot seem to enter edit mode at all. Help?
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Matt,

This is an odd one. Would you mind granting us log in access so that we can have a closer look? We'll need the Org ID and the page name. Thanks!
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Oh, you can send that info to support@skuidify.com, if you like. No need to post that kind of info in the community!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Access Granted and email sent. Thanks, J!
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Matt,

It looks like this is field display type issue. Basically, your Start__c field is a DATETIME, but you are using the DATE field renderer in edit mode. Try changing this in your renderFilterDatesnippet...
	skuid.ui.fieldRenderers.DATE.edit( field, value );
...to this...
	skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value );	
However, you'll now get the time along with date picker when the users are selecting the date. If you want to hide it, you could add something like this to your field renderer snippet just after the above JS:
	//  Hide the time selection inputs
field.element.find('.nx-dt-timewrapper').hide();

Make sense?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thanks, J! I had to do a bit of additional tweaking to get the day to display correctly after a change (the condition wasn't updating in the event listener), but it looks like we finally got it sorted! thanks so much!

Skuid support rocks.