I am creating an application using angular2.
I need to get a Date from user input using a calendar popover, but I need to put a mask on user input to stay in this format dd-mm-YYYY when he is typing.
I am using two different modules that I got from web ng-bootstrap and angular2-text-mark
<input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">
When I use textMask and ngbDatepicker on same tag I get this error
ERROR: More than one custom value accessor matches form control with unspecified name attribute.
Is there a way to do this kind of things ?
Thanks
I was facing the same problem. I have used "ngx-datepicker with mask".I removed ngModel from the input and it's working absolutely fine.
It doesn't have a solution until today.
Here is what i've done to still be able to use a MASKED INPUT and a Ngb DATEPICKER,
I've created two inputs, one with the masked input, the other with the datepicker.
Whenever a value changes, they both update the main object (wich used to be the ngModel
bind.
Here is the code. I hope it helps someone.
<div class="input-group">
<input
type="text"
class="form-control form-control-sm"
[(ngModel)]="begin_date"
(change)="onDateInput($event.target.value)"
placeholder="dd/mm/aaaa"
[textMask]="{mask: maskedInput.date}"
>
<input
type="hidden"
(dateSelect)="onDateSelect($event)"
[(ngModel)]="object.begin"
ngbDatepicker
#dI="ngbDatepicker"
>
<div class="input-group-addon">
<button
class="btn btn-outline-secondary btn-sm"
(click)="dI.toggle()"
type="button"
>
<i
class="fa fa-calendar"
aria-hidden="true"
></i>
</button>
</div>
</div>
Rafael, I had the same issue, my solution was set the input to readonly and allow the user to choose the date only using the calendar.
<fieldset class="form-group">
<label>End Date</label>
<div class="input-group">
<span class="input-group-addon" (click)="dpEndDate.toggle()">
<i class="fa fa-calendar"></i>
</span>
<input readonly required [(ngModel)]="model.endDate"
type="text" class="form-control" id="endDate"
name="endDate" ngbDatepicker #dpEndDate="ngbDatepicker">
</div>
</fieldset>