Closed mahmudie closed 5 years ago
did u try to just use it? in worst case, u can place it as JS on page itself and use from there...
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
Try to update your set value function like this:
var pick = this.element.data('MdPersianDateTimePicker'); $('#shspkr' + this.uniqueName).val(value || ''); pick.update();
Thank you Volcan;
The above was helpful and I can select now.
I can write a wiki describing the steps to include.
Hi; I would like to convert and use the following in xxDialog.ts but don't know how. Any hand please.