H5 script DatePicker does not work

Legacy Contributor

Hello everyone,

Using an H5 script, I added 6 date fields on the CRS610/J panel using a datePicker and they don't work properly.
When I click on a date on the calendar, I get the following error message in the browser console: "Uncaught Missing instance data for this datepicker" and the date is not modified.
If I click on the current date, or if I go through the gear, the date is changed without any problem.

Here is my code:

  private addDateField(line: number, column: number, name: string, $dateElem: any, isEnabled: boolean) {
    const textElement = new TextBoxElement();
    textElement.Name = name;
    textElement.Position = new PositionElement();
    textElement.Position.Top = line;
    textElement.Position.Left = column;
    textElement.Position.Width = 6;
    textElement.IsEnabled = isEnabled;
    this.contentElement.AddElement(textElement);

    this.contentElement.GetElement(name).inforDateField({
         openOnEnter: false,
         startDate: new Date(),
         dateFormat: `${this.setDtfm()}`,
         beforeShow: function() {
             if ($(this).val() == "") {
                 $(this).datepicker("setDate", new Date());
             }
         },
    });
  }

Do you have any idea what's not working please ?

François

Legacy Contributor

I found the reason for the problem.
The date format has to be defined in the attributes of the textElement and not in the properties of the datePicker :

  private addDateField(line : number, column : number, name : string, $dateElem : any, isEnabled : boolean) {
    const textElement = new TextBoxElement();
    textElement.Name = name;
    textElement.Position = new PositionElement();
    textElement.Position.Top = line;
    textElement.Position.Left = column;
    textElement.Position.Width = 6;
    textElement.IsEnabled = isEnabled;
    textElement.Value = '';
    textElement.DateFormat = this.setDtfm();
    $dateElem = this.contentElement.AddElement(textElement);

    $dateElem.inforDateField({
         openOnEnter: false,
         startDate: new Date(),
         beforeShow: function() {
             if ($(this).val() == "") {
                 $(this).datepicker("setDate", new Date());
             }
         },
    });
  }