How to Change a z3c.form Date Widget with javascript

EDIT: The question is: How to update the UI part of a mockup's pickadate widget after changing the value of the current date?

In Plone 5, I have a z3c.form with a date field date_expiration. Its default value is today+6 years. In the same form there's a user_type field. If user_type is changed to "professor", I want to change the value to today+20 years. Since this happens on the client side, I must do it with javascript's change event. But I don't know how to change a pat-pickadate UI after succesfully changing the date. Although I've changed the date-value attribute, neither the calendar, nor the visible user input text is updated,

How can I update a pickadate's UI state using javascript?

Thanks in advance.

1 Like

Write some jQuery code listening on 'change' events of the particular element and then modify the value of the other element.


Thanks, Andreas. I got the part about on change, my problem is that I don't know what attribute to change. No matter what attribure I cange, the widget UI isn't updated, the user still sees the old value.

I update <input class="pick-a-date" />, value attribute, and no change.

I update <div class="patter-packadate-date-wrapper"><input date-value=""> date-value attribute, and nothing.

Not very helpful, you need to provide more details and your event handler code in particular.


Let's forget the event handler for a second, that's not the problem. In fact, let's forget about z3c.form and everything. My question is simply: how to change, using javascript, the year of a mockup's pickadate widget. If you have to write a javascript function to unconditionally modify the value, what html node would you modify?

This is the html code of a pickadate widget (as seen in for only date widget):

It has a div.pattern-pickadate-wrapper which contains a div.pattern-pickadate-date-wrapper, which contains an input.pattern-pickadate-date. If I change the data-value attribute of this input, the widget doesn't show any change, at all. Inside all this structure, there's a <select> for the year. If I chose an option, and add a selected="" attribute, the UI widget doesn't change.

There's nothing that I can do in this html code that have any effect in the widget. None, nada, zip, zero.

Again, if I browse and open the javascript console, and use jQuery, I haven't found any way to modify the fricking date and change the year in the widget...

I added an id to the main div. After that, if I try:

$($('#blah input')[0]).attr('data-value', '2016-05-01')

it changes the value of the attribute, but no change in the shown date widget.

year=$($('#blah select')[1])

changes the year's value, but no change in the shown date widget, neither the date nor the year select widget.

I think 'on change' is what you need to look at (maybe your script ran before the widget was shown (?))

Thanks, espenmn. The problem is not how or when to invoke the function. I know how to do that. What I don't know is what the function should do to update the UI. I can easily change the value that will be send with the form. But changing that value doesn't affect the UI of the widget.

Of course, I could manually change every node that is visible to the user... the year, the human readable date. That means that I would have to re-implement the code that is already called when the user clicks the calendar. And that's what I don't want to do.

Another way to ask this question is: how to update the UI state of a mockup widget, once you've successfuly changed the state of the model/the corresponding hidden value?

The answer I was hoping for was something like "after updating the attribute 'date-value', inkoke this function of pickadate, and it'll update the calendar and the human readable input text value."

Sorry if this answer is stupid ( I never tried this):
I was thinking on modifying the html as I thought the js script read it when you 'clicked the button':

So, my idea was to only change
input class="pat-pickadate" value="maybesomething" etc />

input class="pat-pickadate" value="2030-01-01 01:01" etc />

I haven't used patternslib yet, but did you see this:

You need to find out where the text object from
has been added and then you have to create a change event with the new date you want to see in the pattern.


Thank you very much, do3cc!