Calendar Date Picker for Entry Field

Use JQuery UI to add a date picker widget to your entry field.

Preview image

Tags: , , ,


  1. Profile photo of switalba Switalski
    switalba Switalski

    I really like this and it couldn’t come at a better time.
    Q: I tried copy/paste into another project, but cannot see the picker. What am I doing incorrectly?


  2. Profile photo of John Blackmon
    John Blackmon

    Its nothing you’re doing, its just that the snippet of JavaScript code (the “OnShowRunJS” action) that is on the page references the entry field by its unique ID, and when you copy the set of objects to the new title, it gets a new unique ID. So, in this case, the Javascript code references “entry39id”. “39” is the unique identifier for that Lectora entry field, and “entry39” is the JavaScript name for the entry field object. Digging a bit deeper, the actual input field within the entry field object has an ID of “entry39id”. So when copied, depending upon the title that it is copied to, the unique ID of “39” is probably taken, so it gets a new ID number, and so the JavaScript code can’t find the entry field.

    There are two ways to solve this:

    – In the title you’ve copied the JavaScript to, look for the HTMLName of the entry field, its on the properties if you hover over the little callout at the bottom of the name panel it will show it. You can then change the number in the script to the new number. So for instance, the current “entry39id” in the script might become “entry76id”, if the HTMLName is entry76.

    – Even better, you can change the script slightly, and make it work with all titles that you copy it to, by using a small utility in Lectora called “%HTMLNAME%”. When Lectora writes out JavaScript, it looks for the exact keyword “%HTMLNAME%” and replaces it with the name of the object that the action is tied to, just for examples such as this. So you would need to do the following:

    Move the OnShowRunJS action from the page to the Entry_1object, so it is a child of the entry field
    Change the first line of the script from:

    $( “#entry39id” ).datepicker({


    $( “#”+ “%HTMLNAME%” +”id” ).datepicker({

    And now it will work no matter what the unique ID of the object is when you copy the controls.

    Let me know how it goes!

Your email address will not be published. Required fields are marked *