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 plone.app.widget/mockup 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.

-aj

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.

-aj

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 http://plone.github.io/mockup/dev/#pattern/pickadate for only date widget):

https://gist.github.com/jdinuncio/a9de7a7ecc45898191b91de9a343ce94

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 http://plone.github.io/mockup/dev/#pattern/pickadate 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])
year.val("2018")

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 (?))

https://api.jquery.com/change/

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 />

to
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 https://github.com/plone/mockup/blob/master/mockup/patterns/pickadate/pattern.js#L230
has been added and then you have to create a change event with the new date you want to see in the pattern.

4 Likes

Thank you very much, do3cc!