The Ember Documentation on serializers mentions that date attributes are parsed somehow:
By default, attributes are passed through as-is, unless you specified an attribute type (DS.attr('date'))
However, when I return an ISO-style date of the form 2014-08-13 14:37:53, my Ember inspector shows that my date attributes are simply empty objects. I've played with manually deserializing these with a custom serializer, but I'd like to use the default Ember Data method if possible.
Am I missing something in the docs?
Related
I am using a native HTML Date input component like below in Angular -
<input #dateField id="dateField" type="date">
#ViewChild("dateField") el: ElementRef;
onClick() {
console.log(this.el.nativeElement.shadowRoot);
}
It rendered the date based on the operating system locale of the user like below -
However, whenever I try to access the value from this field, it always returns the value in 'yyyy-mm-dd' format.
I want to access the actual string value which is getting displayed on the UI as per user locale like '16-Sep-2021'. Is there any way to achieve this? I have tried properties such as innerHTML, textContent, innerText, outerText but none of them is returning the actual displayed value.
Also, is it possible to access the locale information in which it is showing this date value? Even if the default placeholder text -
I am also not able to access the shadowRoot property on this element, it always returns me null.
Also, this is not specific with Angular, even if normal Javascript it gives same result.
There is no way to achieve what you're looking for. You can only retrieve the value in one of the following formats:
value will return the date in yyyy-mm-dd.
valueAsNumber will return the date in timestap
valueAsDate will return the date in JavaScript Date format.
In angular you can use,
fromDate
package to convert date into output like you wanted, here is the snippet just copy and paste at required place and you will be able to see the date format you wanted:
//add this
import { formatDate } from "#angular/common";
//format it
const format = 'dd/MM/yyyy';
const myDate = '2019-sep-16';
const locale = 'en-US';
const formattedDate = formatDate(myDate, format, locale);
console.log(formattedDate)//16/09/2019
Hope this will help :-p
Intro:
we are using formik or final-form as a form manager in react
we get entity from API
we need to map that entity to edit form values
Case 1:
entity has an ISO date property
we use a date-picker whose onChange returns a JS date object
What should we store in form state: ISO date (String) or JS date (Object)?
If we store ISO date, parsing must be done in onChange handler.
Case 2:
entity has a boolean property
we use select element whose onChange returns a string
What should we store in form state: true (Boolean) or "true" (String)?
The general question is this: What to store in the form state?
Raw onChange values which can be parsed when they are used?
Or it is better to assure that date-pickers always return ISO date or undefined, that boolean fields always return Boolean or undefined, etc.
Case 1:
i stored all date like JS date, and if i needed, then i convert to iso.
Case 2:
Boolean(onChange())
I think it really doesn't matter that much. With my libs, redux-form and final-form, there are parse/format functions to manage the conversion to and from form state. You can use those, and then not have to convert it upon submission, or keep it in the structure that your input component wants until submission and then convert it. I suppose the latter would technically be faster, as it would not require two conversions on every change.
I often use react-rte, a wysiwyg editor, and convert the raw format to markdown in the form state on every keypress and it's plenty fast, so... I think it's just up to what feels more right to you. ⚖️
First, for people wondering, I'm referring to this DatePicker
https://danielykpan.github.io/date-time-picker/#locale-formats
While the DatePicker feels and looks great, I have an issue with the outputting values. There are numerous options to format the view-part of a date, but I haven't seen or found examples or explanations on how I can switch the outputted ISO-8601 (2018-08-29T00:00:00.000Z) standard in my form. I'm using the datepicker in a reactive form and I have several pages with a similar prerequisite. I need to parse this value into a different format. For example...
29-08-2018
My first attempt - which wasn't too smart to begin with - was using [(ngModel)]="dateField" to grab the value that is inputted and change it into a value that I wanted to. Needless to say, of course it was changed in the view as well and since I didn't refer to index of the form field it merely caused a blank field. Shortly after I realized that the approach was poor to begin with, but since I can't find configurations for this particular problem I'm pretty lost as to what I can do.
#ak.leimrey. Normally all the datepicker give you a value of one type (in your case a string format in ISO, other case, e.g. using ng-bootstrap, return an object with day,month and year). if you want to send in other format, in the submit you can map the values and convert the form.value.
submit(form)
{
if (form.valid)
{
let result={
...form.value, //all the values of the form, but change some one
searchParams:form.value.searchParams.map(x=>{
...x
value.map(v=>{
let items=v.split('-');
return items[2].substr(0,2)+"-"+items[1]+"-"+items[0];
})
})
}
console.log(result)
}
}
Yes in your case transform the object is some hard but see as using the spread operator and map you can transform the value
use moment js libaray . its a simple and rich library that can help u ;
u can get it via npm : npm i moment .
then u can convert formats like this :
moment("2018-08-29","YYYY-MM-DD").format("YYYY-DD-MM"); // outputs : 2018-29-08
or
moment("2018-08-29","YYYY-MM-DD").format("DD-MM-YYYY"); // outputs : 29-08-2018
Whenever I a try something like this in view template it is working as expected.
{{20*30}}
but whenever I try
{{somevalue1*somevalue2}}
Where somevalue1 and somevalue2 both are coming from component and somevalue2 is coming from api and it is inside an array, it is displaying NaN.
How to deal with that?
Is it because of the String value?
How to convert that in Number in template?
Is it because of the String value?
Yes, it is. You can't easily access the windows scope in template scope, so I would make a method:
calculateStuff(){
return Number(somevalue1) * Number(somevalue2);
}
And in template:
{{calculateStuff()}}
If the string doesn't start with characters representing number, it will still return NaN.
somevalue1 somevalue2 are probably strings. You'll need to share more code to get a real answer, though.
Add {{somevalue1}} and {{somevalue2}} to the template as well, just so you can be sure the template is receiving the values you expect.
Problem is the string value that is formatted according to some locale ( in your case it is US locale )
You can eighter:
convert the strings to values on data retrieving
create angular transform pipe
use a helper function/method in your template
if you are able, adjust data on the server side (it is a good practice sending raw data and formatting them when needed)
There are several ways how to handle the conversion. If this is the only format you receive that numbers. Simply replace the comma Number('1,234.42'.replace(',', '')) or use some of the libs that were created for this purpose like NumeralJS
I am trying to create a datepicker in ember.js using the ember-pikaday addon. The datepicker should have a date in it when it is displayed. So, I added the following code to my template:
{{pikaday-input value=rental.date format="MMMM Do YYYY" yearRange="2016" useUtc=true}}
However, even though I specify the value as rental.date, the input is blank. I know that the value of rental.date is not null because when I set the placeholder to rental.date, the placeholder's date is correct.
The problem with your case is due to the fact that you are passing a momentjs object to ember-pikaday directly. Instead of passing the momentjs object directly just create a computed property called as follows on your owner component:
rentalDate:Ember.computed('rental.date', function() {
return this.get('rental.date').toDate();
}),
and perform binding to rentalDate. ember-pikaday does not handle momentjs object passed in by itself, just extract the actual javascript date object via toDate() as shown in code snippet above. Just for clarification you can also pass formatted string to ember-pikaday such as "25/05/2016", "2016.05.25", etc. It will also handle such string values properly.