Need help with using jquery

[mahmudie]

Hi; I would like to convert and use the following in xxDialog.ts but don't know how. Any hand please.

$('#date5').MdPersianDateTimePicker({
targetTextSelector: '#inputDate5',
toDate: true,
groupId: 'rangeSelector1'
});

[ga5tan]

did u try to just use it? in worst case, u can place it as JS on page itself and use from there...

[mahmudie]

Hi @Estrusco

Using your ColorPicker which is a great help for me, I tried to copy it and using create a date picker in Serenity.

I changed the code and it shows the date picker and I can also select one.

Now I have problem with showing the selected value does in the Textbox.

The code is

namespace pnddbAsp.Common {
    @Serenity.Decorators.element("<div style='display: flex' />")
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class ShamsiDatePickerEditor extends Serenity.Widget<any>
     implements Serenity.IGetEditValue, Serenity.ISetEditValue {
    constructor(container: JQuery) {
        super(container);

        this.updateElementContent();
    }

    private updateElementContent() {
        var divID = this.element.attr('id');
        var inputID = 'shspkr' + this.uniqueName;

        this.element.append('<input type="text" class="editor flexify" id="' + inputID + '" /><span class="fa fa-calendar fa-lg" style="padding-top: 5px; padding-left: 3px; border-radius: 4px"><i></i></span>');

        this.element.append(
            "<script>" +
            "$('#" + divID + "').MdPersianDateTimePicker({" +
            "targetTextSelector: '#shspkr'," +
            "toDate: true," +
            "groupId: 'rangeSelector1',"+
            //"autoInputFallback: false" +
            "});" +
            "</script>"
        );
    }

    public get value(): string {
        return $('#shspkr' + this.uniqueName).val();
    }

    public set value(value: string) {
        if (value != undefined) {
            var pick = this.element.data('MdPersianDateTimePicker');
            pick=value;
            $('#shspkr' + this.uniqueName).val(pick.update());
        }
    }

    public getEditValue(property, target) {
        target[property.name] = this.value;
    }

    public setEditValue(source, property) {
        this.value = source[property.name];
    }
 }
}

The link of the DatePicker is i want to use is here https://github.com/Mds92/MD.BootstrapPersianDateTimePicker/tree/master-bs3 the demo of is here https://www.jqueryscript.net/demo/Pretty-Persian-Date-Time-Picker-with-jQuery-Bootstrap/

Thank you

[volkanceylan]

Try to update your set value function like this:

var pick = this.element.data('MdPersianDateTimePicker'); $('#shspkr' + this.uniqueName).val(value || ''); pick.update();

[mahmudie]

Thank you Volcan;

The above was helpful and I can select now.

I can write a wiki describing the steps to include.