I have created a date picker in Angular
<div class="datepicker-wrapper">
<label for="license_expiry_date">Start Date (YYYY-MM-DD)</label>
<input type="text" class="form-control" [ngModel]="fromDate | date: 'yyyy-MM-dd'" placeholder="Enter start date" (focus)="onPurchaseDateFocus('from')" name="start_date">
<div [hidden]="!isFromDatepickerVisible" class="datepicker-container">
<datepicker [(ngModel)]="fromDate" name="fromdatepicker" (selectionDone)="onDateSelectionDone('from')">
</datepicker>
</div>
</div>
I can select a date by using date picker which will update the ng-model, the input tag above the date picker is editable. but when I edit the date from the input field instead of date picker instead of selecting by date picker, ng-model is not getting updated.
Why is the value not updated when I edit the input field?
Not sure what's going wrong but my first guess is the one-way data binding on the form control.
[ngModel]="fromDate | date: 'yyyy-MM-dd'"
try to change it to
[(ngModel)]="fromDate | date: 'yyyy-MM-dd'"
More on two-way data binding
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way
Related
While performing the edit operation using angular 13, I'm using HTML input type date. When fetching a date from the database, it is not showing the date in the textbox. Kindly help me.
update-movie.component.html
<div class="mb-2">
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [value]=movieService.movieData.releaseDate required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>```
I found the answer, instead of [value] I used [ngModel] and applied date pipe.
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [ngModel]="movieService.movieData.releaseDate | date : 'yyyy-MM-dd'" required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>
I am using property as input type ="datetime". But this property view the output MM/DD/YYYY. so how do I change the output format of the Date to DD/MM/YYYY?
pick the date format mm/dd/yyyy
<div class="form-group">
<label>{{"StartDate" | localize}}*</label>
<input required class="form-control m-input" type="datetime" bsDatepicker
datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate"
id="TicketWorkDetail_WorkDetailStartDate"
name="TicketWorkDetail_WorkDetailStartDate">
</div>
If you are using ngx-bootstrap... I think you are from the bsDatepicker directive on your input. You can use the bsConfig directive to format the date input. https://valor-software.com/ngx-bootstrap/#/datepicker#format
<div class="form-group">
<label>{{"StartDate" | localize}}*</label>
<input required class="form-control m-input" type="text" bsDatepicker
datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate"
[bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }"
id="TicketWorkDetail_WorkDetailStartDate"
name="TicketWorkDetail_WorkDetailStartDate">
</div>
You can set the input type attribute to text and the bsDatepicker directive will do it's work.
I have this below where birthDate is "1938-08-08T00:00:00" and I want it to be "dd/MM/yyyy", but I can't seem to figure out how to use the Angular date pipe in ngModel.
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">
I tried this with no luck:
[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}
The only way I can get it to work is if I format the date in the .ts code first with Angular 'formatDate()'
I don't understand why you want to format it inside a ngModel.
One way data binding (Interpolation {{}})doesn't work inside a two way databinding. If you want to use pipe, I would instead suggest to use a value attribute instead of ngModal.
Your HTML should look like:
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">
Here is a live example for the same. https://stackblitz.com/edit/angular-ubpthb
On Angular 9, this works for me, with two way binding:
<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>
Ref - Using Pipes within ngModel on INPUT Elements in Angular
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">
ho to make input data field disabled in angular 6 until previous input data field is selected. Like I have one source field and one destination input field. So i want to make Destination field to be disabled until the Source is selected.
If I consider your source and destination input fields as Start Date and End Date input fields with type="date", then you can create the destionation field i.e. End Date field as readonly as shown below:
<input type="date" name="end_date" id="end_date" class="form-control" placeholder="* End Date" #endDate="ngModel" [(ngModel)]="end_date" required readonly>
And add a change function on your Source field i.e. Start Date field as shown below:
<input type="date" name="start_date" id="start_date" class="form-control" [min]="today" placeholder="* Start Date" [(ngModel)]="start_date == null ? '' :start_date" #startDate="ngModel" (change)="onDateChange($event)" required>
Now on your Component.ts file, create the same function (i.e. onDateChange($event)) to remove the readonly property from End Date field, which will execute whenever a change-event occur on Start Date field.
onDateChange(event) {
$("#end_date").prop('readonly', false);
}
<div class="input-group" ng-init="d.expiredAt = toDate(d.expiredAt);">
<input type="text" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
I want to compare this date with current date and highlight this field with red if it is < than current date.
I guess that the purpose of your feature is to notify / prevent user from selecting a date before today ?
If it's the case, the bootstrap-ui component you're using provides the feature :
minDate (Default: null) - Defines the minimum available date.
Requires a Javascript Date object.
If you declare the today's date in your controller :
$scope.now = new Date();
You can use it like this in your HTML :
<input type="text" min-date="now" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
It will disable the selection of passed dates.