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
Related
when i try to typetext as string on an input with type=number the browser display different value
var items = ["15300", "06500", "15400","24500","30580","77104","92730"];
const zipcode =items[Math.floor(Math.random()*items.length)];
console.log(zipcode);
return String(zipcode)
}
.typeText(AddressesLocators.txt.txtZipcode,await Utils.getRandomZipcode(),{ replace: Boolean })
This is because when setting the "type" attribute of an HTML input element to "number", the browser expects the entered value to be a valid number and therefore may attempt to convert the entered value to a number.
If you enter a string like "15300" in an input with type="number", the browser will try to convert the string to a number, in which case the resulting value will be 15300. However, if you enter a string like "06500 ", the browser will interpret the value as an octal number and then convert it to decimal, which will result in 3328 instead of 6500.
To avoid this behavior, you can use an input with type="text" instead of type="number" if you want the entered value to be treated as a string. Or, if you need to use type="number", make sure the value you enter is a valid number and does not start with a leading zero, such as "6500" instead of "06500".
I hope this helps.
I have a service which returns a JSON of type array[obj1{name, usage, id}, obj2{name, usage, id}] on HTML page I am creating a form with form field = name and it is pre-populated with value = usage. Ex: if there are 2 objects inside array where name1=a usage1=1 and name2=b and usage2=2, 2 form fields will be created. Form field names will be name1 and name2 and will be filled already with usage1 and usage2 value respectively. I am doing this with this code:
<form>
<div class="form-row">
<div class="form-group" *ngFor="let item of items">
<label>{{item.name}}</label>
<input type="number" min="0" [id]="item.name" [name]="item.name" class="form-control" [(ngModel)]="item.usage">
</div>
</div>
</form>
It is working fine. Now suppose user changes the value for usage1 and usage2. On submit button I have to create a json object in typescript and send it in the API. I am facing issues to create the JSON object. I have tried:
onSubmit{
this.changedValues = this.items.usage;
console.log(this.changedValues);
}
But console.log return undefined. Json object I am expecting should be something of they type:
changedValues[{upadatedUsage1, id1},{updatedUsage2, id2}]
How can I create a json object dynamically and also how can I send the correct id with the correct updated usage value. Thank you
The reason for undefined value is that, items is an array and hence doesn't have the property usage
onSubmit {
this.changedValues = this.items;
console.log(this.changedValues);
}
This should give the array with updated values.
I wonder how to get the date of the input and compare it with a list of objects.
<input type="date" [(ngModel)]="date">
How do I get the value from the date and compare it with the date of my list of object? I mean after picking 23 as the day, there should some objects appear with the correct day and so on. I am not sure how to implement that.
Do anyone know how to implement such function in a good way?
EDIT: So far, I used (ngModelChange) to get the new date value.
<input type="date" [(ngModel)]="date" (ngModelChange)="changedDate($event)>
Getting the value like this:
changedDate(e){
let date = e.target.value;
}
I wonder whether I can get a sub value for the date when not every field is filled but I think not since the validationMessage say the full date is required.
You can use YYYY-MM-DD format for the dates which can directly be converted to Javascript Date objects. After these obejcts you can get date and compare the results.
Demo
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
dateArr = [{ name: 'carlo', date: '2012-01-23'}, { name: 'carla', date: '1999-10-20'}];
changedDate(e) {
const value = this.filterDate(new Date(e));
if (value) {
console.log('Object found', value)
}
else {
console.log('Nothing found')
}
}
filterDate(selectedDate: Date) {
for(const d of this.dateArr) {
const elemDate = new Date(d.date);
if (elemDate.getDate() === selectedDate.getDate()) {
return d;
}
}
}
}
You can use ngModelChange event like this
<input type="date" [(ngModel)]="date" (ngModelChange)="date = $event">
also call a function like this
<input type="date" [(ngModel)]="date" (ngModelChange)="matchDate($event)">
Create that function and you will get value on date change there you can get a date value with using function or just bind in the variable.
you can compare date with using momentjs
You need to learn how Reactive Forms work. Pay attention for [formControl] directive and valueChanges observable of that formControl. You can access input data in your component with it.
if your date input is not part of a form and you need to update/check against values whenever the date changes you can do something like this:
<input type="email" [(value)]="date" (change)="dateChanged()">
if it is then you can use ngModelChange with your above code:
<input type="date" [(ngModel)]="date" (ngModelChange)="dateChanged()">
Note: you can pass through the change event into the functions using $event too.
then in the dateChanged() function you can do whatever you need with the new value.
I have an input field with datetime-local type, on editing the form, I cant get the value (which is datetime). In UI, it has the ----- --:--, but when inspecting the code, VALUE parameter has data
Ive tried to document.getElementById().value, $().val(), $().text(), but all of them return "" (empty)
<input type="datetime-local" id="date-from" required="required" value="2019-08-20 05:11:00 UTC" name="pass_request[date_from]">
document.getElementById('date-from').value === ""
$('#date-from').val() === ""
$('#date-from').text() === ""
I value to return, but not emptiness
You should format your value according to RFC 3339 as written here - https://www.w3.org/TR/html-markup/datatypes.html#form.data.datetime-local
The following parts, in exactly the following order:
A date.
The literal string "T".
A time.
Example:
1985-04-12T23:20:50.52
1996-12-19T16:39:57
So try
<input type="datetime-local" id="date-from" name="pass_request[date_from]" value="2015-02-15T03:35:00">
I’m trying to pass a ViewData object of type double to an input field of type number with 1 decimal place. But the input field keeps empty. What am I doing wrong?
<p>
Debiet factor: <input name="FlowFact" type="number" value="#ViewData["FlowFact"]" step="0.1" autocomplete="off">
#String.Format("{0:N1} m³/h", #ViewData["FlowFact"]) <!--Result = 3,1 m³/h-->
</p>
The issue you're facing is what the ViewData["FlowFact"] is returning, which according to your #String.Format("{0:N1} m³/h", #ViewData["FlowFact"]) <!--Result = 3,1 m³/h--> it's 3,1.
That is not recognised as a number so it won't work. Either return a whole number or a decimal number. So instead of a 3,1, return a 3.1 or just a 3.
Otherwise change the input type to accept what you are passing.
I found the solution thanks to jamiedanq.
In my controller I was writing a double value to the #ViewData["FlowFact"] object. But in my view it was returning a value 3,0999 , which is not a correct value for the input type 'Number' because of the ",".
Instead of passing a double value to the object I've changed it to pass a string value and replace the "," with a ".":
Controller:
#ViewData["FlowFact"] = #String.Format("{0:N1}", MyDoubleValue).Replace(",",".");
View:
<p>
Debiet factor: <input name="FlowFact" type="number" value="#ViewData["FlowFact"]" step="0.1" autocomplete="off">
</p>