Date format in underscore template(javascript) - backbone.js

I have gone through the questions asked about date format in stackoverflow and i have found numerous ones marked duplicate. I am posting this after trying out various methods that they have accepted as answer but i cannot somehow get it to work.
First of all i am using backbone.
What i have is a date format in (Y-m-d) which comes from database. Through json parsing i get it into the underscore template. I need it to be in (m-d-Y) format.
Value from database
data.pp.dob
What i tried (to convert it into m-d-Y format)
var date = new Date(data.pp.dob);
dateNew = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
I am using jquery datepicker plugin to get the calender. So everything is going wierd when i try to format date. Sometimes it will give NAN when i try to trigger calender. Sometimes it will give the year like in 4400 and all..
$('.date-picker').datepicker();
HTML code
<%
var date = new Date(data.pp.dob);
dateNew = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
%>
<%=dateNew%>
<input value="<%=dateNew%>" class="span5 date-picker dob" name="dob" id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd" />

Assuming date you receive from backend is correct, most probable issue lies here:
<input value="<%=dateNew%>" class="span5 date-picker dob" name="dob" id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd" />
Datepicker widget has some strange convention:
y - year (two digit)
yy - year (four digit)
So, format for input should be: yy-mm-dd documentation: http://api.jqueryui.com/datepicker/

Related

How to download data from server using date in get methos React?

I'm new with React. I was looking for information for several days to no avail. So I decided to ask you my stupid question.
I have problem with transforming date from DatePicker to date format which than I can use in get request.
I use DatePicker from this https://www.npmjs.com/package/react-datepicker
Sample correct api call:
localhost:8080/api/measurement/12374?date=2020-12-13 12:00
but date from DatePicker look like:
Sun Dec 13 2020 12:00:00 GMT+0100 (Central European Standard Time)
I play with date for example:
let x = new Date();
let x1 = x.toLocaleDateString() + " " + x.toLocaleTimeString();
output: 23/12/2020 09:29:16
but still I have problem with date format and I also don't know how to pass this date correclty to get method, because http request have % instead "space"
http://localhost:8080/api/measurement/12120?date=23/12/2020%2009:48:15
but when I use string as date it work fine and download data:
let value = "12374";
let date = "2020-12-13 12:00";
const request = "http://localhost:8080/api/measurement/" + value + "?date=" + date;
Can someone explain me how can I convert date from DatePicker to format like this 2020-12-13 12:00 and then use it in get method?
I will be very grateful for any answer!
Thank you ;)
you can use momentjs for this task to format date.
https://www.npmjs.com/package/moment
import moment from 'moment'
let date = new Date();
let result = moment(date).format('DD/MM/YYYY hh:mm')
output: 23/12/2020 02:23

How to fix moment.js in reactjs?

I am using moment.js and getting this error:
Deprecation warning: value provided is not in a recognized RFC2822 or
ISO format. moment construction falls back to js Date(), which is not
reliable across all browsers and versions. Non RFC2822/ISO date
formats are discouraged and will be removed in an upcoming major
release. Please refer to
http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: [0] _isAMomentObject: true, _isUTC: false, _useU
In my react component I have:
const sortTasks = (first, second) => moment(first.endDate).diff(second.endDate);
The first.enddate=‘20 dec 2018’
How can I avoid this warning in the console?
One alternative is to inform moment.js about the date format used, by providing a second parameter to the moment function.
The format of "20 dec 2018" is DD MMM YYYY".
If you have both dates in the same format, you should write
const sortTasks = (first, second) =>
moment(first.endDate, "DD MMM YYYY").diff(moment(second.endDate, "DD MMM YYYY"));
Note that the other date is also explicitly transformed to a moment, since it is expressed in a non-standard format.
You can check the details in the moment.js documentation about parsing.
If you want to find out the difference expressed in days, or in e.g. years / months / days, you can use moment.duration. Check the moment.js documentation about this feature.
E.g. to obtain the number of years, months and days between two dates, say date1 and date2, we could proceed as follows (assuming date1 is before date2):
const theDuration = moment.duration(date2, date1);
const yearsElapsed = theDuration.years();
const monthsElapsed = theDuration.months();
const daysElapsed = theDuration.days();
Hope it helps - Carlos

'date' filter without time zone in angularjs

This is input format:
yyyy:MM:dd'T'HH:mm:ss'Z' (Coming as a string from json service)
Required output format:
dd-mmm-yyyy
I have tried with {{txnDate | date:'dd-mm-yyyy'}}
but it is not working..
What is the format you are following for your date?
A quick var a = new Date(); a.toISOString(); in console will give you something like "2015-02-19T13:30:13.347Z". The formatted string you are receiving is not following any standard and I am afraid parsing it to date will result in Invalid Date in most of the browsers.
So you can either
Get your Date in proper format.
Make the best use of whatever is available. You can use split to break your string into individual components.
Something like:
var a = "yyyy:MM:dd'T'HH:mm:ss'Z'" //Replace with actual string
b=a.split(':') will result in ["yyyy", "MM", "dd'T'HH", "mm", "ss'Z'"] giving you year and months in b[0] and b[1].
For date, you can use b[2].substring(0,2) to give you dd.
You have all date components(apart from time components, which you don't need anyway) as string.
Either use them directly(as a string) or make a date object using these components(since you want month in MMM format).
$scope.txnDate = new Date(b[0]+'/'+b[1]+'/'+b[2].substring(0,2));
I am sure there are more ways to optimize this. Comment if this doesn't work for you, will try to elaborate more.

Formatting date using Angular

Why the following code produces strange output (looks like moment().valueOf() returns 0)
Since 7 days ago : {{(moment().valueOf() - 7*24*60*60*1000) | date:'yyyy-MM-dd' }}
returns
Since 7 days ago : 1969-12-25
You can do it with moment API :
moment().subtract('days', 7).format("YYYY-MM-DD")
Working jsfiddle : http://jsfiddle.net/D9UCF/1/
This is because:
moment#valueOf simply outputs the number of milliseconds since the
Unix Epoch, just like Date#valueOf.
[http://momentjs.com/docs/]
One way to achieve what you want is as follows:
Since 7 days ago: <span ng-bind="sevenDaysAgo"></span>
$scope.sevenDaysAgo = moment(new Date(new Date().setDate(new Date().getDate() - 7))).format('YYYY-MM-DD');

how to calculate datedifference in angularjs?

I am using angular js and trying to display a text ie 'recent' if the order was placed within 5 days ago from today. So if the difference in days between todaysDate and the Order.dateCreated <= 5 then I want to display 'recent' otherwise blank:
orderid | dateCreated | status
1 | 27-2-2014 | recent
2 | 27-1-2014 |
angular script fragment:
<table>
<tr data-ng-repeat="order in orders" >
<td>{{order.id}}</td>
<td>{{order.dateCreated}}</td>
<td><span ng-show="(getDate()-order.dateCreated)<=5">recent</span></td>
</tr>
</table>
You just need to do this in standard JavaScript and expose a method to your scope to allow the orders to use:
Something like this, however, if your dates are currently stored in a UK format as they appear to be in your question. You will not be able to parse them like this, consider having your server-side code spit out a standard format that JavaScript can parse.
If you find you are having problems doing that, cannot change the server-side response from that format, or want to keep the format, you could use a library to parse it, such as: http://momentjs.com/docs/#/parsing/string-format/ This also has some decent tools for checking the difference: http://momentjs.com/docs/#/displaying/difference/
$scope.isRecentOrder = function(date) {
// Assuming date is a string of parsable format: ie. "2014-01-27T01:00:00+00:00"
var diff = new Date() - new Date(date);
// Calculate from milliseconds
var days = ((((diff / 1000) / 60) / 60) / 24);
return days >= 5;
}
Then you can use the directive ng-show="isRecentOrder(order.dateCreated)"

Resources