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>
Related
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.
In my typescript code I am just importing the => { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
I have this html codel:
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker>
</div>
The result is:
what I have.png
I want the basic calendar to begging form 2004.
Something like: what I want.png
How can I change the first year that pops-out to be 2004 instead of 2020?
If there is no value set for the datepicker it will default to the current date. This is what you see happening in your example.
What you can do is inside the html template add the [bsValue]="dateForDatepicker" attribute to your bsDatepicker input element.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsValue]="dateForDatepicker"
>
In the component you can then add dateForDatepicker = new Date("01-01-2014") which should cause the datepicker to display that value initially.
For more information you can check the documentation: https://valor-software.com/ngx-bootstrap/#/datepicker#date-initial-state
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">
I have a problem with Thymeleaf date format when I send a date. The HTML shows the date correctly within a h3 tag but not inside the code of the datepicker and I can not understand why....
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:value="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}" th:field="*{birthdate}">
</input>
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
why it shows the date with hours in one place and correctly in the other...... input type="date" name="birthdate" id="birthdate" class="form-control margin-bottom-20" value="1932-10-10 00:00:00.0"
Thanks
th:field and th:value shouldn't be used on the same tag. (th:field sets the name, id and value attributes of the tag it is on.) You'll see that you would get the correct formatting if you left off th:field, but then the form wouldn't submit correctly. In my opinion, the way to fix this is to:
Add an InitBinder method to your controller, like this:
#Controller
public class WhateverController {
.
.
.
#InitBinder
public void initBinder (WebDataBinder binder) {
binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy/MM/dd"), true));
}
.
.
.
}
Remove the th:value. Your HTML should look like this:
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:field="*{birthdate}" />
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
There are ways to add global binders as well, if you want this to work for your entire application and not just that one controller.
Ensure that the date passed in as value (in this case birthdate) is of this format:
yyyy-mm-dd
and NOT in the date picker's format mm/dd/yyyy
Read more here.
I am using datetimepicker to display date and time and store it in a particular model in this format ("2015-01-01T15:10:23"), from this I want to hide seconds only in front-end, but not in back-end model.
Could anyone help me to solve my problem?
<div class="form-group" ng-class="{ 'has-error' : userForm.datetime.$invalid}">
<label>date and time</label>
<div class='col-sm-12 input-group date'>
<input id="datetimeid" ng-model="datemodel" name="datetime" type='text' class="form-control" ng-change="datevalidator()" placeholder="date and time" required/>
</div>
$scope.datevalidator = function () {
var datetime = $scope.datemodel;
$scope.datemodel = (datetime.indexOf(':00') > -1) ? datetime.replace(':00',"") : datetime;
};
You can use angular built-in filter:
{{ date_expression | date : format : timezone}}
Here you have more info on how to use it: https://docs.angularjs.org/api/ng/filter/date