How to add a Date Picker on H5 Script?

Legacy Contributor

Hello, 

I need to add a Date Picker on a program PPS170 using H5 Script with script version 2.0?  

Can someone help me with the JS code to insert a Date Picker element in H5 like the screenshot below?

Thanks. 

johanna-olsen

   private addDatePicker(name: string, top: number, left: number, width: number, isEnabled: boolean, tabIndex?: number) {

    var userContext = ScriptUtil.GetUserContext();

    this.DTFM = userContext['DTFM'];

    var textElement = new TextBoxElement();

    textElement.Name = name;

    textElement.Position = new PositionElement();

    textElement.Position.Top = top;

    textElement.Position.Left = left;

    textElement.Position.Width = width;

    textElement.DateFormat = this.DTFM;

    textElement.IsEnabled = isEnabled;

    if (tabIndex !== undefined) {

        textElement.TabIndex = tabIndex;

    }

   

    if (ScriptUtil.version >= 2.0) {

    // Additional codes for version >= 2.0

    // Flag that the element is datepicker type

    textElement['type'] = 5;

    // New UI datepicker can only handle 6-character date format

    textElement['dateFormat'] = this.DTFM.replace(/Y/gi, 'YY').replace(/M/gi, 'MM').replace(/D/gi, 'DD');

    }

   

    var contentElement = this.controller.GetContentElement();

   

    var $dateElem = contentElement.AddElement(textElement);

   

    if (this.mode !== '5') {

   

    if (ScriptUtil.version >= 2.0) {

    // no extra code needed for new UI

    } else {

   

    $dateElem.inforDateField({

    hasInitialValue: true,

    openOnEnter: false,

    beforeShow: function() {

        if ($(this).val() == "") {

        $(this).datepicker("setDate", new Date());

        }

        },

 

        onClose: function() {

        var formatdatew = $(this).val();

        console.log("dateBeforeFormat", formatdatew)

        var arrdate = formatdatew.split('/');

        if(arrdate[0].length == 1){

        arrdate[0]= 0+arrdate[0];

        }

        if(arrdate[1].length == 1){

        arrdate[1]= 0+arrdate[1];

        }

        var originalDate = arrdate[0]+arrdate[1]+arrdate[2];

       

        if(this.DTFM === "YMD"){

        var actualdate = originalDate.substring(6, 8) + "" + originalDate.substring(0, 2) + "" + originalDate.substring(2, 4);

        }

        if(this.DTFM === "YYMMDD"){

        var actualdate = originalDate.substring(6, 8) + "" + originalDate.substring(0, 2) + "" + originalDate.substring(2, 4);

        }

       

        if(this.DTFM === "MDY"){

        var actualdate = originalDate.substring(0, 2) + "" + originalDate.substring(2, 4) + "" + originalDate.substring(6, 8);

        }

       

        if(this.DTFM === "MMDDYY"){

        var actualdate = originalDate.substring(0, 2) + "" + originalDate.substring(2, 4) + "" + originalDate.substring(6, 8);

        }

       

        if(this.DTFM === "DMY"){

        var actualdate = originalDate.substring(2, 4) + "" + originalDate.substring(0, 2) + "" + originalDate.substring(6, 8);

        }

        if(this.DTFM === "DDMMYY"){

        var actualdate = originalDate.substring(2, 4) + "" + originalDate.substring(0, 2) + "" + originalDate.substring(6, 8);

        }

       

        console.log("actualdate",actualdate);

        $("#" + name).val(actualdate);

        },

     

    });

    }

    }  

     

 

}