I am getting the following error in my console - "Error: InvalidPipeArgument: 'Unable to convert "[object Object]" into a date' for pipe 'DatePipe'".
I have a calendar input, which should allow the user to select a date and then pass on that date in a certain format, 'dd/MM/yyyy'. I want the date selected to show in the calendar input once they have selected a date.
I realise I cannot have two way binding on the [ngModel] if I have a pipe there so I'm using
(ngModelChange). If I remove the #createdByCutOffDate="ngModel" then the error is removed but I cannot see the selected date show in the calendar input.
I also tried the updateCreatedByCutOffDate() method taking a date type or string.
this.createdByCutOffDate is in the following format - 'Thu Feb 17 2022 00:00:00 GMT+0000 (Greenwich Mean Time)'
component.html
<input type="date"
id="createdByCutOffDate"
[ngModel]="createdByCutOffDate | date:'dd/MM/yyyy'"
#createdByCutOffDate="ngModel"
(ngModelChange)="updateCreatedByCutOffDate($event)" />
component.ts
createdByCutOffDate: Date;
updateCreatedByCutOffDate(date: string) {
this.createdByCutOffDate = new Date(date);
}
createdByCutOffDate is a Date object that has its methods and properties.
So to solve your problem, use "createdByCutOffDate.date | date:'dd/MM/yyyy'" instead of "createdByCutOffDate | date:'dd/MM/yyyy'"
Related
I want to edit or change date of a json object but because of the long milliseconds string, the datetime-local could not display the date. Is there a way to first remove three(3) numbers from the milliseconds string before I parse the date string to form input.
json
{
"appointment": "Dentist",
"date": "2007-04-30 13:10:02.047438"
}
comp.ts
showDetail(data: any) {
this.formData.controls.appointment.setValue( data.appointment );
this.formData.controls.date.setValue( data.date ); //here the datetime-local could not read .000000 millis, I need to remove last 000
}
.html
//....
<div class="form-group">
<label>Date:</label> <input type="datetime-local"
value="2007-04-30T13:10:02" class="form-control"
formControlName="date" required>
</div>
I have in the DB e.g 2007-04-30 13:10:02.047438 but I want to slice to 2007-04-30 13:10:02.047 in my .ts file, so that my form can display the date when showDetails function is called.
You can use substr() like so:
let str = "2007-04-30 13:10:02.047a438";
str.substr(0, str.length-3);
Here's the matching documentation
If you want to avoid trimming the length a better approach would be using Angular Date Pipe filter. you can display in various formats as per your choice. you can check it out here DatePipe
I'm trying to convert the time and date from an html5 input to our countries format.
I'm trying to convert this: 2018-05-23 03:00
To this: 23-05-2018 03:00
I'm using angulars DatePipe like this:
var newDateBegin = this.dateFilter.transform(this.newDateBeginString.replace("T", " "), "dd-MM-yyyy HH:MM");
I have to replace the T in the string because for some reason the HTML5 input outputs it like this: 2018-05-23T03:00
But after converting it using: 2018-05-23 03:00, i get the following result:
2018-05-23 03:05.
No matter what time I put in there it always ends with xx:05. Am I missing something?
this is how i create the DatePipe:
private dateFilter: DatePipe = new DatePipe("nl-NL");
Isn't HH:MM the problem? M (uppercase) gets the month. Try to change it.
Month - MM - Numeric: 2 digits + zero padded
Use mm, as explained here
"dd-MM-yyyy HH:mm"
I have an object with a Time attribute. When the attribute is inserted into my Edit form it appears like:
2018-06-06 12:00:00 -0400
Is it possible to instead have the form show:
12:00 PM
Yes you can use strftime as following
created_at = Time.now
created_at.strftime("%I:%M %p")
which will produce out put like below based on your time
"03:23 PM"
Use strftime: strftime doc
datetime_var.strftime("%I:%M %p")
I am using the Jira API, and need the start and end dates for a sprint.
The JSON data I get back is :
{"jodaTimeZoneId":"Europe/Berlin","sprints":[{"id":5,"start":"13082015044305","end":"27082015044305",...
Normally, json returns the date in milliseconds, and you need to deserialize that.
Now however, I can clearly see the date (13-08-2015 & 27-08-2015) followed by some other numbers I don't care about. Is there anyway Angular can get the correct format using | date? Or any other way I can use?
When I use {{13082015044305 | date:'dd-MM-yyyy'}} it returns 21-07-2384. The parsing date format is wrong. So change the format to recognized way.
So I used
input.toString().replace(/(\d\d)(\d\d)(\d\d\d\d)(\d\d\d\d\d\d)/, '$1-$2-$3');
Used it in a custom filter.
app.filter('correctDateFormat', function() {
return function(input) {
return input.toString().replace(/(\d\d)(\d\d)(\d\d\d\d)(\d\d\d\d\d\d)/, '$1-$2-$3');
};
});
Then
Display the date as
{{13082015044305 | correctDateFormat }}
I think you can use
{{ data | filter:options }}
where data is your json and date filter
{{'1388123412323' | date:'MM/dd/yyyy # h:mma'}}
an option like this.
I have a JSON file which returns multiple items with different values for concert dates.
So this value returns:
date: "2014-11-27"
and in my HandlebarsJS-template I have:
<p>{{date}}</p>
but I want to display the date like this:
NOV 27
by using HandlebarsJS and yes, I have MomentJS included too.
How can I achieve this?
You could register a Handlebars helper like this:
Handlebars.registerHelper('formatDate', function(dateString) {
return new Handlebars.SafeString(
moment(dateString).format("MMM D").toUpperCase()
);
});
After registering you have to change your template:
<p>{{formatDate date}}</p>
JSFiddle