We Keep Coding

How to format this date Timestamp(seconds=1676238124, nanoseconds=838000000) in react native

Im fetching some data from firestore, the date fields are in the format of {seconds: XXXXX, nanoseconds: XXXXX}. React Native complains about this saying this format is not a serializable value so to those fields I do this:
docData.createdAt.toLocaleString()
That gives me dates in the following format:
Timestamp(seconds=13223213, nanoseconds=12312312)
When I want to render those date fields with a human format like ISOString or LocaleDateString or anything it doesnt let me.
I've tried to do new Date(createdAt) but that gives me NaN.
I've also tried createdAt.toDate() | createdAt.toISOString() it doesnt recognize the functions.
I've also tried Timestamp.fromDate(createdAt) but it doesnt work either.
I want to get my dates in a human reading format like DD/MM/YYYY HH:mm:ss
Here some pieces of code:
Fetching data:
Some of my attempts
I'd like to have some hints or ideas or how to approach this issue.

****we can use this format ..... work for me ****
import moment from 'moment'; <--- import this line
const timestamp = 1676238124;
const nanoseconds = 838000000;
const Date = moment.unix(timestamp).add(nanoseconds / 1000000, 'milliseconds');
const Fordate = Date.format('YYYY-MM-DD HH:mm:ss.SSS');
console.warn(Fordate)

Although the above answer works, this is what I did:
The issue was caused because of the SerializableCheck from redux [https://redux-toolkit.js.org/api/serializabilityMiddleware] so I decided to set this middleware to false so It won't cause this error.
This is a StackOverFlow question about this topic that I found [https://stackoverflow.com/questions/61704805/getting-an-error-a-non-serializable-value-was-detected-in-the-state-when-using]
Now, about the date formats I did some changes:
Having disabled the serializeCheck option, now I can use .toDate() functions
Now wherever I need a date in a specific format I simply use a global function that receives two params: date & format and using momentJS the rest is easy.

Vue JS - Retrieve date only

I'm making an api call which retrieves a set of objects. One of the objects returns a date and time together like this:
createdAt: "2020-11-04 09:48:32"
This is where I display the date and time:
<template v-for="item in collectedTrash">
<BeforeAndAfter v-if="item.isPresented === 1"
:key="item.username"
:avatarUrl="require('#/assets/img/images/img_stats_km#2x.png')"
:imageBefore="getImageUrl(item.imageUrlBefore)"
:imageAfter="getImageUrl(item.imageUrlBefore)"
:username="item.username"
:date="item.createdAt"/> This is where I get the date
</template>
Is there anyway that I can retrieve the date only, rather than the date and time?

I am assuming you don't have access to the api and therefore have to process the date in your vue application.
Do you need the date as a date Object or is a string fine?
If a string representation is enough, you could use a library such as Date fns and use the format function:
...
:date="format(new Date(item.createdAt), 'yyyy-MM-dd')"
Another option might be to only use the first 10 characters of the string you received as the date: date="item.createdAt.substring(0,9)"

Did you try something like: :date="item.createdAt.substr(0, 10)"

In my experience the easiest way to format datetimes in JS it to use the Moment.js library (https://momentjs.com/). You could reformat the datetime string before passing it to your child component.
Or, if you don't want to rely on a third-party library and you know that the datetime string will always be passed in that format, I suppose you could do item.createdAt.slice(0, 10).

Moment.js can be very helpful with dates and times
Moment Docs
moment("String").format('L'); // 04/11/2020

MomentJS Date to java.sql.timestamp

I use a React component to get some date values.
My backend is write in Scala and only want java.sql.Timestamp date format.
Juste before POST my entites, I have to transforme my date from momentjs object to java.sql.Timestamp.
I tried moment.unix(), moment.valueOf(), but nothing seems good.
Thanks a lot.

Kendo DateTimePicker Not Handling UTC Offset

We are using the Kendo datetimepicker, implemented using the AngularJS directives:
<input type="text" kendo-date-time-picker k-ng-model="TheDateModel">
Where: TheDateModel = 2016-02-15 20:58:24.0000000 +00:00
I am in the CST timezone, which is -6 hour offset from the GMT. The current result of the datetimepicker shows a time of 8:58 pm but my expected result is 2:58 pm.
What in the world am I doing wrong?

Disclaimer: I work for Kendo UI team
The Kendo UI Datepicker uses JavaScript Date object internally to hold the selected date value. As you probably know, it always uses the local (browser) timezone. We tried to explain that caveat in our docs too:
JavaScript Date Object - Basics
Due to this default behavior, the widget will use the already converted Date value (with the applied local timezone). The widget doesn't manipulate the value timezone, as it does not have sufficient information how to do that.
Solution
The best approach in this case is to convert the Date strings (like the one you mentioned "2016-02-15 20:58:24.0000000 +00:00") manually before feed the DatePicker widget. For instance, here is one possible approach to do that:
http://dojo.telerik.com/EyuRA
Notice how the value is parsed and then adjusted in the loadData method. Similar thing should be done by the developer that needs to handle different TZ in their app.

I've been down this road and had to implement this:
http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides

So I found the solution to my problem. First off for clarity, and sorry for the misinformation, but my date was coming down from the server as 2016-02-15T20:58:24.0000000+00:00 - add the T and remove all spaces.
All that needed to be done was to add the k-parse-formats attribute to the directive as follows:
<input type="text" kendo-date-time-picker k-parse-formats=['yyyy-MM-ddTHH:mm:sszzz'] k-ng-model="TheDateModel">
Boom, considers the offset and your current timezone, and correctly parses and displays the date and time. Just be aware, that when you specify your own parse formats, to include all possible formats that your dates could be.
For example, I then ran into a problem where I had milliseconds greater than 0 coming through on my dates: 2016-02-15T20:58:24.1234567+00:00. This broke the datetimepicker again. Simpler fix: just changed my parsing format to: yyyy-MM-ddTHH:mm:ss.fffffffzzz. Make sure the number of f is greater than or equal to the number of possible milliseconds.
<input type="text" kendo-date-time-picker k-parse-formats=['yyyy-MM-ddTHH:mm:ss.fffffffzzz'] k-ng-model="TheDateModel">

Create an input type="date" in Ember

I'm trying to create an <input type="date"/> in Emberjs and I have two problems:
In my country the date is displayed as DD-MM-YYYY format while the date field requires a MM-DD-YYYY format (and then the browser displays it according to its locale). So the date should be formatted in one way if the browser supports the date input field and in the other way if not
The date is bound to a Date object
I'm using Momentjs for formatting and Ember Data.
I'm trying to extend Ember.TextField like this:
App.DateField = Ember.TextField.extend
value: ( (key, value) ->
if value?
if /Date/.test value.constructor #I assume that if the passed value is a Date object then it is arriving directly from the model
if Modernizr.inputtypes.date
moment(value).format('YYYY-MM-DD')
else
moment(value).format('DD-MM-YYYY')
else # if the passed value is not a Date object then the user is typing into the form
if Modernizr.inputtypes.date
value = new Date('value')
else
value
).property()
type: 'date'
For browsers with date input supports this works.
For the other browsers the date is correctly displayed, but it is saved as a (wrong formatted) string in the model.
How can I maintain the correct formatting while still using Date objects in the backend?
Demo
Update
Thanks to the blog post provided in the accepted answer I was able to update the demo to do what I want (with some weirdnesses, but not relevant at this time)
Demo2

Have look at these two blog posts:
This is a simple date picker:
http://hawkins.io/2013/06/datepicker-in-ember/
This one uses the bootstrap date picker
http://hawkins.io/2013/06/fancy-ember-datepicker-with-twitter-bootstrap/
Hopefully that will help

I don't see any parsing for the string use case. You will need to use something like Date.parse to convert the string entered by the user into a Date object.
if Modernizr.inputtypes.date
value = new Date(value)
else
value = Date.parse(value)