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,<br> condition = model.getConditionByName('Date'),<br> value = condition.value,<br> d = (value == 'TODAY') ? new Date() : skuid.time.parseSFDate(value);<br>$ = skuid.$;<br>var weekday = new Array(7);<br>weekday[0]= "Sunday";<br>weekday[1] = "Monday";<br>weekday[2] = "Tuesday";<br>weekday[3] = "Wednesday";<br>weekday[4] = "Thursday";<br>weekday[5] = "Friday";<br>weekday[6] = "Saturday";<br>var value = weekday[d.getDay()];<br>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?
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:
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.
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],<br /> model = field.model,<br /> condition = model.getConditionByName('Date'),<br />$ = skuid.$;<br />if (field.mode == 'read') { <br /> var cv = condition.value;<br /> var d = (cv == 'TODAY') ? new Date() : skuid.time.parseSFDate(cv);<br /> var weekday = new Array(7);<br /> weekday[0]= "Sunday";<br /> weekday[1] = "Monday";<br /> weekday[2] = "Tuesday";<br /> weekday[3] = "Wednesday";<br /> weekday[4] = "Thursday";<br /> weekday[5] = "Friday";<br /> weekday[6] = "Saturday";<br /> <br /> var value = weekday[d.getDay()];<br /> <br /> skuid.ui.fieldRenderers.TEXT.read( field, value );<br />} else if (field.mode == 'edit') {<br /> skuid.ui.fieldRenderers.DATE.edit( field, value );<br /> <br /> if (model.hasChanged) {<br /> //update model conditions<br /> model.setCondition(condition, value);<br /> modelO = skuid.$M('Open');<br /> modelO.setCondition(modelO.getConditionByName('OpenDate'), value);<br /> modelA = skuid.$M('ApptInteractions');<br /> modelA.setCondition(modelA.getConditionByName('Date'), value);<br /> }<br />}
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.
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.
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?
To what end? Curious as to what you are attempting to do.
Is it that you want the ability to filter records based on the value in the field? Isn’t that the same as using a table filter without complicating it with the use of a field? The only part that wouldn’t be as you’d like is to display the date as day of week.
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.
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);
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?
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();
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!
