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.
Related
I'm using the component DatePicker from antd.
I have currently a Form from antd, in which there's a Form.Item, in which I put the DatePicker.
I want the Form.Item to be given the date in a specific format, lets say YYYY-MM-DD, is there a way to do that?
by giving it the prop format I can choose how it will look like in the UI but I'm trying to make it send back the value by the same format.
I've tried giving it a dateFormat prop with the function
function dateFormat(date) {
return moment(date).format("YYYY/MM/DD");
}
but it doesn't work.
is there a way to do this manipulating the data in the onChange function?
so apparently there's no way to do it in the props,
I've checked and so has #MoaazBhnas.
If anyone somehow finds a way, I'll be looking forward to hear!
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
I'm having trouble generating events for react big calendar. When making a new event object (in another component), I set the id, event name, just fine, and then I wonder if I'm setting start and end correctly. I'll have a moment like this (created with moment.js) date = 05/15/2018 11:00 AM, and when setting the start/end fields of an event I will set them as new Date(date). For now I am saving this value in local storage, but it eventually will go to a database. I checked, and when I create a constant at the top of my component with my moments, and the new Date() syntax explicitly in the code it works fine, but my pre-made saved dates are not working. I am getting the following error.
index.js:209 Uncaught TypeError: date[("get" + method)] is not a function
at Object.hours (index.js:209)
at Object.isJustDate (dates.js:91)
at TimeGrid.js:237
My question is how should I go about saving my moment so that it can be correctly interpreted by react big calendar?
I answered my own question, Store `new Date ()` in JSON object
You can't store a Date as a Date in JSON, you have to convert it, so I will do so.
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?