Vue JS - Retrieve date only - javascript

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

Related

How to filter a date response to show data from today's date only?

Using GET I receive an array and one of the data items is a timestamp string in the format:
"date":"2017-01-11 12:19:15",
I have a function that needs to show specific data from this GET request for the current day only.
I think I would need to run an each loop and select only items that have the date: "2017-05-28", ignoring the "12:19:15" part.
Is there an easy and clean way to do this?
Many thanks!
Use Date.parse() (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) to parse the date, then iterate over the list of parsed dates, only selecting those within the range you seek.
When using Date.parse(), you might want to be familiar with this Why does Date.parse give incorrect results?

AngularJS date formatting

is any chance to format date in ng-repeat?
I was trying to format it like
<div class="col-date">{{row.Calendar.start | date : "dd.MM.y"}}</div>
But it was not working. How do I format date in ng-repeat?
Use moment and angular-moment, are definitely best modules out there for stuff related to dates.
First of all convert $scope.row.Calendar.start to date/moment object if it is a string and then use angular moment to show desired date format
Here is a how you can do so:
Inside controller:
$scope.row.Calendar.start = moment($scope.row.Calendar.start,'YYYY-MM-DD HH:mm:ss');
<div class="col-date">{{row.Calendar.start | amDateFormat : "dd.MM.y"}}
From AngularJS perspective everything seems to be valid.
Please check following:
Format of the data you provide to your date filter - is it UNIX timestamp or something else that might be processed by filter?
Check if the data that you are trying to parse, is available
Please provide us with more information about what are you trying to convert, and what result do you have
It seems like you are trying to apply angular date filter of a string object.
Try to first convert it to a Date object in controller and then apply date filter on it.
EXAMPLE
$scope.dtObj = new Date($scope.row.Calendar.start);
then in HTML write this
<div class="col-date">{{dtObj | date : "dd.MM.y"}}</div>
for more details check out documentation here https://docs.angularjs.org/api/ng/filter/date
try this it worked for me hope for you to
{{row.Calendar.start | date:'MMM-dd-yyyy'}}

Parse this value with moment doesn't work

I have a date value like this value.game_date = 2013-10-27 03:39:35 and I'm trying to parse it as follow:
moment().format(value.game_date, 'DD-MM-YYYY');
But I get this as result 29-10-2013 00:00:00 where I'm looking for this format: 29-10-10-29 without hour, what I'm doing wrong?
I think you have some typos or misinformation in your post regarding the output you're getting and what you're desiring.
Based on what appears to be a misunderstanding of moment, however, I am pretty sure that what you want is:
value.game_date = '2013-10-27 03:39:35';
var formatted_game_date = moment(value.game_date).format('DD-MM-YYYY');
// produces '27-10-2013'
moment() is a factory function which takes a date string and returns a moment instance. That moment instance then has various methods available, such as format() which takes a format string as the first param.
So your code is producing a moment instance representing current date/time (because you're not passing any params to moment()), then you ask .format() to return a string formatted using your date stamp as the formatter. Your date string doesn't have any of the things in it which format would parse and replace, so you just get back your date string.
The code I gave passes the date string to moment to produce the instance, then asks .format() for a formatted string using your desired format template.

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).

format datestring based on locale without creating Date object (JavaScript)

I have a date string which looks like this: 2013-04-06T14:15:00
I'm looking for functions similar to toLocaleDateString()
(documentation). However, those functions don't take a String parameter; you need to create a Date object first. I'm trying to avoid timezones altogether, so does anyone know of a function (standard or from a plugin) which can format a datestring using a specific locale's rules (1/17/2013 vs 17/1/2013 etc.) using only my datestring?
I'm currently using jQuery, and this plugin for formatting dates: jQuery.dateFormat
Pass your date string to the Date constructor. It parses most legitimate formats.
new Date("1/17/2013")
new Date("2013-04-06T14:15:00")

Categories