How to format date from Mongodb using react - reactjs

I have 2005-12-03T18:30:00.000Z this format of date in mongodb.I am using react for frontend .
The problem is i want to display date in dd/mm/yy format .How i can achieve this?

Let's say you get the date from MongoDB and then save in the state, then next in your code you can use momentjs date library, then simply format the date to dd/mm/yy like:
const dateFromDB = '2005-12-03T18:30:00.000Z'
const formattedDate = moment(dateFromDB).utc().format('DD/MM/YY')
console.log( 'Date From DB:', dateFromDB )
//=> 2005-12-03T18:30:00.000Z
console.log( 'Formatted Date:', formattedDate )
//=> 03/12/05
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.1/moment.min.js"></script>

Try this
var d = new Date('2005-12-03T18:30:00.000Z');
var date = d.getDate();
var month = d.getMonth() + 1; // Since getMonth() returns month from 0-11 not 1-12
var year = d.getFullYear();
var newDate = date + "/" + month + "/" + year;
console.log("Formatted Date:", newDate)
// Formatted Date: 3/12/2005

So, that's format is called ISO 8601
'2005-12-03T18:30:00.000Z'
You can format it easily with a third-party library, I recommend to use dayjs it's lighter than moment
dayjs('2005-12-03T18:30:00.000Z').format('DD/MM/YYYY')
more info, see: https://day.js.org/docs/en/display/format

Related

Get Integer month and year value in YYYY-MM-DD format from JS date object?

When the user selects from the date field, it is displayed on the screen in the following format.
for example :
moment(Date).format('YYYY-MM-DD')
output=> '2021-10-13'
How can get month(10) and year(2021) values ​​as integer using the ('YYYY-MM-DD') format from above output?
Reference
const d = new Date('2021-10-12')
const year = d.getFullYear()
const month = d.getMonth() + 1
const day = d.getDate()
console.log({year,month,day})

Get month and date from React moment

I have a date on Wed Dec 25 2019 05:30:00 GMT+0530. I want to format into 25 Dec
How can I do that?
const date= currentItem.date;
First convert it into moment
let date_moment=moment(currentItem.date,"ddd MMM DD YYYY HH:mm:ss ZZ")
Then convert it to required format
let req_format=date_moment.format("DD MMM")
Note: if your timeformat is 12 hour use hh. for other datetime format and timezone format check moment documentation :) Moment Docs
This snippet of code will get exactly what you want from any date entered as variable name date to dateIn.
var dateIn = moment(date, 'YYYY/MM/DD');
var month = dateIn.format('M');
var day = dateIn.format('D');
console.log(day + " " + month);

How to parse date in input type="date"?

i have problem in angularjs when i use <input type="date" ng-model="trip.start"> i think data in trip.start is 2017-5-10 but data in trip.start is 2017-5-10T17:00:00.000Z
How to parse trip.start just yyyy-mm-dd without time.
please helpme if you have a idea to parse it.
I will suggest to use moment for date format. After getting data from server use:
$scope.trip.start = moment($scope.trip.start).format("YYYY-MM-DD");
For this to work, include Moment.js library.
The ng-model data must be a Date Object.
Then your input box will show the date.
If you want to show formatted date then you can do something like this-
$scope.formattedDate = $filter('date')($scope.trip.start, "your date format");
Add $filter as a dependency in your controller and bind $scope.formattedDate to your input box.
You can do,
var date = trip.start.split("T")[0]
you will get expected result.
I don't know how to completely parse it, but try date filter when you are using the data. Something like this
syntax:
{{ date_expression | date : format : timezone}}
in your case:
{{trip.start | date: 'yyyy-MM-dd'}}
For more reference read the documentation here
Your date value seems to be a JavaScript date. Angular already provides a filter for formatted date outputs:
{{trip.start | date:'yyyy-MM-dd'}}
Alternatively you could convert the date to string:
function formatDate(date) {
var date = date || new Date();
var today = new Date(date);
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;
return (yyyy + '-' + mm + '-' + dd);
}

How to change date format in Angularjs

I am facing same problem, by using above mentioned code problem is still not resolved.
My date is coming in JSON like
200515
where 20= date
05= month
15= year,
I am using the following code:-
{{200515 | date : "EEE, MMM dd"}}
but it gives me:
Thu, jan 01
but I want
Wed, May 20
Please help for the same.
You have to create a date object before using your filter because it will only formatted the date. Here your date is null.
Firstly you have to create your date using basic Date api
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
and after use the created object in your code with the filter
Your input string for your date 200015 is not a valid ISO 8601 date string. You must supply either a javascript Date object or a valid string of format such as 'yyyy-MM-ddTHH:mm:ss.sssZ' or 'yyyy-MM-ddTHH:mmZ' etc. See http://en.wikipedia.org/wiki/ISO_8601
Just use .substring() to parse your date string and build a new date object. This works with angular's date filter.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var date = '200515',
day = date.substring(0, 2),
month = date.substring(2, 4),
year = date.substring(4, 6),
time = '0513',
hour = time.substring(0, 2),
minute = time.substring(2, 4);
$scope.date = new Date('20' + year, month - 1, day, hour, minute);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp", ng-controller="MyCtrl">
{{date | date : "hh:mm EEE, MMM dd"}}
</div>

Angularjs + moments-js returns wrong date

i use angularjs and i want parse a string to a date my code looks like this:
var d=moment.utc("2011-10-02T22:00:00.000Z", "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
var year =d.year();
var month =d.month();
var day =d.day();
$log.log("MOMENTS:"+"year: "+year+" month: "+month+" day: "+day);
the date should be "3 october 2011"
but in the log is :MOMENTS:year: 2014 month: 2 day: 6
this date is completly wrong, why is this so and what do i wrong ? i want extract the day, month and year
Here is a fiddle: http://jsfiddle.net/FGa2J/
moment.day() returns the day of the week (not the day of the month) you need moment.date() for that. moment.month() is 0 based, so you will get 9 for October. Also, it seems like moment can parse your date string just fine without specifying the format.
Code from the fiddle:
report ( "2011-10-02T22:00:00.000Z", ["yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"] );
var d = moment("2011-10-02T22:00:00.000Z");
var year = d.year();
var month = d.month();
var day = d.date();
console.log("MOMENTS:"+"year: "+year+" month: "+(month+1)+" day: "+day);
function report( dateString, formats) {
$("#results").append (
$("<li>", { text:
dateString + " is valid: " + moment(dateString, formats).isValid()
})
);
}
You're not using the correct string formatting characters.
You have: "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"
In moment, it would be: "YYYY-MM-DDTHH:mm:ss.SSSZ"
Note that it's case sensitive, and doesn't necessarily match formats from other languages (.Net, PHP, etc).
However - since this is the ISO-8601 standard format, it is detected and supported automatically. You should simply omit that parameter.
From the documentation:
... Moment.js does detect if you are using an ISO-8601 string and will parse that correctly without a format string.

Resources