We Keep Coding

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

How to parse jqwidgets (jqx) date with format?

Basically I have date format which comes from server and which will be not known before and a date that was already formatted in this format, e.g. the format is "dd/MM/yyyy" and the date is "21/01/2018" (two strings). The format that uses jqx differs from the default JS one, as I can see.
What I need to do is to parse it to JavaScript date object. I couldn't find the answer in the official documentation.
Is there any easy was of parsing the date string if you know the date format, using JS, jqwidgets or momentjs?

Eventually, I've finished with inner jqx method that does that exact thing:
var parsedDate = $.jqx.dataFormat.parsedate(src, format);
Where format in this case is "dd/MM/yyyy" and src is "21/01/2018".
P.S. Thanks for the guy that posted anwer with the code that used $.jqx.dataFormat, that really helped me to find parsedate method.

React date picker with Material-UI

I'm using Date picker from Material UI. The code responsible for it looks like:
import { DatePicker } from 'redux-form-material-ui';
<Field
name="birthDate"
component={DatePicker}
placeholder="Birth Date"
container="inline"
format={ null }
/>
It's a lil' bit changed, by erikras for redux form, but works quite similar like normal material ui date picker.
http://www.material-ui.com/#/components/date-picker
My goal is
I'm sending it's value as API request, but unfortunately API accepts the Date only in YYYY-MM-DD format. And MaterialUI date picker gives
2017-05-04T22:00:00.000Z format. How can I change it into just 2017-05-04?
Thank you so much!

I havent tried the library itself in depth however if it return that date in that format you could just take what you need from that if it is a string you could use the substring() method and giving it the desired part start and end. lets Say
result = 2017-05-04T22:00:00.000Z;
var stringNeeded = result.substring(0,10)

instead of substring, I my opinion, better to use moment lib http://momentjs.com/
which allows to format date time values to any format you can imagine
moment(result).format('YYYY-MM-DD')

Angularjs date display

Hi I am trying to figure out how to display date properly using angularjs.
My system returns the date in this fromat
c_date="\/Date(1151470800000-0500)\/"
I dont know what format is it.
I am displaying it
using <span>{{pro.c_date | date:'medium')</span>
When i run this i get date printed in same format
"/Date(1151470800000-0500)/"
Can anyone suggest how to fix this so date can be displayed properly.
Thanks

the date that you're trying to use is a invalid date or maybe I don't know what format are the system using.
The problem is that angular.js requires a data object for can format it. Not a date string.
I suppose that the date is 1151470800000 miliseconds since the epoch least 0500 for adjust hours or something.
If this is correct, you only need to make c_date a Date object before pass to view.
c_date = "\/Date(1151470800000-0500)\/";
var the_date = eval("new "+c_date.replace(/\\|\//g, ''));
http://jsbin.com/zuwizoxe/3/
Regards!

angular.ui DatePicker how to set the Date format?

I am using the angular.ui DatePicker
http://angular-ui.github.io/bootstrap/#/datepicker
In the doc it says:
"Everything is formatted using the date filter and thus is also localized."
I am having a hard time figuring out how to use the date filter to control the date format set in the model.
Using the DatePicker I am getting a date format set in the model like this:
"2013-09-07T03:18:43.000Z"
However, I am trying to serialize with Grails, and I want my date format to be like this:
"2013-09-07T03:18:43Z"
How do I configure the DatePicker to output this format of date? Or since it is a JavaScript date, do I have to do this at the server side? Ultimately, I would like to send:
"2013-09-07T03:18:43Z"
in a JSON put to the server.
TIA

You can follow this trademark way of parsing the default ISO date format to your own format stripping out the milliseconds, in client side.
Or, in the server side (Grails) you can parse the string to your own format as below:
Date.parse("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", "2013-09-07T03:18:43.000Z")
.format("yyyy-MM-dd'T'HH:mm:ss'Z'")
//prints "2013-09-07T03:18:43Z"
If you are persisting a Date instead of a String, just use Date.parse(..) (without .format).