Firstly, there are a couple of pre-requisites. This example uses jQuery, and jQuery UI plugin called, unsurprisingly perhaps given the topic, Year-Select. I am sure there are a multitude of different plugins or tools to do this. Year-Select has the advantage of being super small and easily styleable. In addition it requires minimal coding to get it to work. Two good reasons to use it for this example. Download the file and place it in your folder. Add the jQuery files that you can download from the official site.
- A Word document with a global goal that relates to couple of date attributes
- The two date attributes just mentioned that you should also create. Give them names as well.
- A label which displays these pieces of information.
- A date control on the Screen with a custom Property called name, value “xDate” or anything else you might like to use instead. This is similar to the other examples already described on this site.
Here are the images to help you work all that out. First the screen, with the Date control and the two attributes in the label:
And secondly, the actual content of the Word document. You will notice that I am just trying to usefully have two attributes, one which is the session timestamp (which we can use when the Interview starts up, to default the Year Picker to the current year, for example) and the second attribute is going to store the selected value chosen by the user.
- Create an Input control, which is the basis of our Year Picker
- Get the Session Timestamp
- Convert it to a Date object
- Extract the Year
- Apply the magic CSS class and call the yearselect.js code to intialise the jQuery UI widget
- If the date of registration has no value, then set the value to the year of the Session Timestamp, January 1st (since this was the requirement)
- If the date of registration already has a value – because someone has already edited the year in this Interview session, then get that value and apply it to the Year Selector
As usual the code is absolutely filled with console logging, and the code is willfully non-optimized in order to make it as easy to read as possible for someone who just wants to know what it does. The final parts of the code handles if the user decides to update the year with the picker, and the usual unmount clears the element from the DOM.
And now for some good news (I got a lot of requests for this!). The code example, and all the other code examples, are free to download in the OPA Hub Website Shop as PDF files.
Remember if you have any ideas for examples, or you want to contribute your own, just leave a comment below!