Typescript date picker in new H5 UI

johanna-olsen

I need help to create a datepicker that works in new UI. 

The date picker that I had created for classic UI does not work in new UI.

Does someone know how to make this work?

This is my code that works for H5 classic UI

private addDatePicker() {

        const textElement = new TextBoxElement();

        textElement.Name = "DatePicker";

        textElement.Position = new PositionElement();

        textElement.Position.Top = 5;

        textElement.Position.Left = 9;

        textElement.Position.Width = 10;

        textElement.DateFormat = "yyyyMMdd";

        const now = new Date();

        const today = now.toISOString().slice(2, 10);

        textElement.Value = today;

        let contentElement = this.controller.GetContentElement();

        const $dateElem = contentElement.AddElement(textElement);

        $dateElem.inforDateField({

            dateFormat: "yyMMdd",

            hasInitialValue: true,

            openOnEnter: false,

            startDate: new Date(),

            beforeShow: function () {

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

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

                }

            },

        });

    }

Legacy Contributor

Hi, 

The data picker format has some restrictions for script version >=2.0. 

It accepts only 6 digits and you set the format to "yyyyMMdd" 8. Please refer to the code I used to work between both UI.

var userContext = ScriptUtil.GetUserContext();
this.DTFM = userContext['DTFM'];
var textElement = new TextBoxElement();
textElement.Name = "DateTextBOX";
textElement.Position = new PositionElement();
textElement.Position.Top = 10;
textElement.Position.Left = 20;
textElement.Position.Width = 20;
// textElement.DateFormat = "YYMMDD";
textElement.DateFormat = this.DTFM;

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) {

} else {

$dateElem.inforDateField({
hasInitialValue: true,
openOnEnter: false,
beforeShow: function() {
if ($(this).val() == "") {
$(this).datepicker("setDate", new Date());
}
},
onClose: function() {
var formatdatew = $(this).val();
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);
$("#DateTextBOX").val(actualdate);
},
});
}
}