prevent typing in input filed

[krishnaGmail]

Hello Sir,

Your plugin is working well for me. Thanks to that. But when I try to type a text in the input field of an angular-mydatepicker directive it is enabled to typing there. Plz, help me out how to prevent typing text in angular-mydatepicker.

Thank You

[kekeh]

You can set input box disabled or readonly.

<input angular-mydatepicker disabled />
or
<input angular-mydatepicker readonly />

[krishnaGmail]

Sir really appreciate your help. Thank you.

On Sun, Nov 10, 2019 at 5:19 PM Keke notifications@github.com wrote:

You can set input box disabled or readonly.

or

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/kekeh/angular-mydatepicker/issues/17?email_source=notifications&email_token=AM7IX3PPQ3O6K2UHMYWL733QS7YLHA5CNFSM4I3NFGP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDU3MGQ#issuecomment-552187418, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM7IX3LNGGKINIDOVBYOFKTQS7YLHANCNFSM4I3NFGPQ .

[kekeh]

If you are using version 0.2.1 you can also use div as a host element. Then the date field is not editable.

See example code from here: https://github.com/kekeh/angular-mydatepicker/tree/master/example/app/date-picker-div-host-element

Check also the divHostElement option from the README.

[9marta5]

Hi, if I set input box disabled, the value of the angualr-mydatepicker is doesn't show. My input box is like this:

<input class="input-box" angular-mydatepicker
                                    (dateChanged)="onDateChange($event,row,allColumns[i])" name="mydate"
                                    [locale]="locale" (click)="dp.toggleCalendar()" [(ngModel)]="row[0].DateContent"
                                    [ngModelOptions]="{standalone: true}" #dp="angular-mydatepicker"
                                    autocomplete="off" [disabled]="!allColumns[i].colDef.Editable" />

[kekeh]

Hi @9marta5

You can try to do it this way:

public disabled: boolean = true;

<input name="mydate" [attr.disabled]="disabled ? '' : null" />

In above if the value of the disabled member is true then there will be disabled attribute in the input box, otherwise not.

I have done it that way here in my test application and it works.

Here is instructions on how to run the test application.

[9marta5]

Hi @kekeh thank you so much. It works!

[sofianekorbi]

Hi @9marta5

You can try to do it this way:

public disabled: boolean = true;

<input name="mydate" [attr.disabled]="disabled ? '' : null" />

In above if the value of the disabled member is true then there will be disabled attribute in the input box, otherwise not.

I have done it that way here in my test application and it works.

Here is instructions on how to run the test application.

Thanks for the trick !