How to manipulate date in javascript - javascript

I'm having problem with manipulation of dates. I have a variable savedTime variable in localstorage wich contains this date:
Wed Aug 31 2016 16:31:30 GMT-0300 (Hora oficial do Brasil)
I need add 1 hour for this variable savedTime to check if passed 1 hour:
var savedTime = new Date(savedTime); //converts string to date object
var checkExpired = savedTime.setHours(savedTime.getHours() + 1); //add 1 hour to savedTime
But on trying add 1 hour to this variable converting the string in a object, this (savedTime) returns:
1472675490000
What i expected is the string with + 1 hour:
Wed Aug 31 2016 17:31:30 GMT-0300 (Hora oficial do Brasil)
And compare dates to check if passed 1 hour
var currentDate = new Date();
if(currentDate > checkExpired) {
//passed 1 hour
}

instance.setHours() manipulates the instance. So you can do
d = new Date('Wed Aug 31 2016 16:31:30 GMT-0300');
d.setHours(d.getHours() + 1);
Now d contains the new datetime.

setHours will manipulate the current object and return it's new value. Instead of using the return value, just continue to use the object.
var savedTime = new Date(savedTime); //converts string to date object
savedTime.setHours(savedTime.getHours() + 1); //add 1 hour to the savedTime
if (currentDate > savedTime) {
//passed 1 hour
}

Use .getTime()
if(currentDate.getTime() > checkExpired) {
//passed 1 hour
}

You are getting the value back in milliseconds from the 'epoch date' which is January first 1970.
If you want this in the correct format, you will need to parse this information out into that with some math / other Date object functions.
Here is the documentation to do that, it's very straightforward:
JS Date Formatting

Related

Javascript : Increase a Date object by a year

I'm assign a new date object to my object attribute like that :
giftObject.purshasedDate = new Date()
which give a date format :
Date Thu Feb 20 2020 13:36:37 GMT+0100 (heure normale d’Europe
centrale)
I want to increase this date by one year, I tried :
new Date().setFullYear(giftObject.purshasedDate.getFullYear() + 1) but it give a number serial like this : 1613824899244
I do not understand what that number serial mean! it's a date or should a try some thing else ?
By default all dates object are timestamps.
JavaScript Date objects represent a single moment in time in a
platform-independent format. Date objects contain a Number that
represents milliseconds since 1 January 1970 UTC.
Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
I think the default new Date() object can display itself to string by in fact it's also a timestamp.
If you want to display a date as string, you have to use the toLocaleString() method on Date.
I tried by updating the original date and it return the string of the date, don't know why but it's work by updating the original date.
Example :
let giftObject = {};
giftObject.purshasedDate = new Date();
giftObject.purshasedDate.setFullYear(giftObject.purshasedDate.getFullYear() + 1);
console.log(giftObject.purshasedDate)
Result : "20/02/2021 à 13:55:49" for my French browser
const oldDate = new Date("Date Thu Feb 20 2020 13:36:37 GMT+0100")
const newDate = oldDate.setFullYear(oldDate.getFullYear() + 1)
const dateWithPlusOneYear = new Date(newDate)
console.log(new Date(dateWithPlusOneYear))
//Sat Feb 20 2021 13:36:37 GMT+0100 (Central European Standard Time)
Please use this one:
purshasedDate = new Date();
purshasedDate = new Date(purshasedDate.setFullYear(purshasedDate.getFullYear() + 1));

datetime convert to date string - javascript

I have following datetime value in a json :
Fri Jan 22 2016 14:34:38 GMT-0500
I would like to display something like "January 22, 2016"
How could I achieve this in javascript. I have JQuery, Extjs libraries available.
Try creating object having properties of abbreviated months, values of full month, using for..in loop , String.prototype.slice(), String.prototype.replace()
var months = {
"Jan":"January",
"Feb":"February",
"Mar":"March",
"Apr":"April",
"May":"May",
"Jun":"June",
"Jul":"July",
"Aug":"August",
"Sep":"September",
"Oct":"October",
"Nov":"November",
"Dec":"December"
};
var date = "Fri Jan 22 2016 14:34:38 GMT-0500";
// extract "Jan 22 2016" from `date`
var d = date.slice(4, -18);
for (var prop in months) {
if (new RegExp(prop).test(d)) {
// replace abbreviated month with full month name
d = d.replace(prop, months[prop]);
// replace day with day followed by comma `,` character
d = d.replace(/(\d{2})(?=\s)/, "$1,")
}
}
document.body.textContent = d
This question is addressed to the same question of yours. You can use the functions shown here to construct the date string as you want.
// This could be any Date String
var str = "Fri Feb 08 2013 09:47:57 GMT +0530 (IST)";
var date = new Date(str);
This will then give you access to all the Date functions (MDN)
For example:
var day = date.getDate(); //Date of the month: 2 in our example
var month = date.getMonth(); //Month of the Year: 0-based index, so 1 in our example
var year = date.getFullYear() //Year: 2013
Extract date and time from string using Javascript
Found this crazy method here, but worked!
Converting milliseconds to a date (jQuery/JS)
Here is the fiddle that i'v done
https://jsfiddle.net/Ripper1992/hj6L2Lvz/
var now = new Date("Fri Jan 22 2016 14:34:38 GMT-0500");
alert(now.customFormat( "#MMMM# #DD#, #YYYY#" ) );
customFormat is the function called to get each part of the Data, parse and replace based on the #MMMM# or #DD# or #SS# defined by the user.
And here is the complete function with the documentation
http://phrogz.net/JS/FormatDateTime_JS.txt

javascript date conversion showing wrong month

In the following date conversion after converting back the long integer The date says october instead of september
var date = 2013-09-23 18:31
startdate = getTimeStamp(date); //1382533260000
Now
t=1382533260000
rt = new Date(t)
//Wed Oct 23 2013 18:31:00 GMT+0530 (India Standard Time)
function getTimeStamp(strDate) {
var a1=strDate.split(" ");
var d1=a1[0].split("-");
var t1=a1[1].split(":");
var dtObj = new Date(d1[0],d1[1],d1[2],t1[0],t1[1]);
return dtObj.getTime();
}
In JavaScript, month numbers are numbered 0-11.
If you're parsing from components like this into the Date constructor you'll have to subtract one from the number:
function getTimeStamp(strDate) {
var a1=strDate.split(" ");
var d1=a1[0].split("-");
var t1=a1[1].split(":");
var dtObj = new Date(d1[0],d1[1] - 1,d1[2],t1[0],t1[1]);
return dtObj.getTime();
}
Months are zero-based, so January is zero, February is one, etc..
So you need to use d1[1]-1 in your new Date() constructor.
Javascript month parameter starts from 0 upto 11 so, passing 8 means september

javascript - UTC date object manipulation

The UTC thing is really making me crazy... I am trying to have date and time on site in UTC so it has no affect of any timezone.
What I do, I create a date object
var d = new Date();
//convert it to utc
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var utc_date = new Date(utc);
utc_date.setHours(20,0,0)
console.log(utc_date.getTime()) // I want this to be same irrespective of timezone, but don't know why it is changing
Please guide where I am doing wrong..?
UPDATED:
I wanted to create a dropdown of time like on http://jsfiddle.net/HNyj5/ the concept here is I use a timestamp either from client side of selected date or from db and then I generate this dropdown dynamically. So I want the timestamp to be similar on both server/client thats why I am trying to use UTC date object.
You can retrieve the UTC datetime from local time like this (example timezone = GMT+0100):
var currentUTC = new Date; //=>Mon Mar 18 2013 13:53:24
currentUTC.setMinutes(currentUTC.getMinutes()+currentUTC.getTimezoneOffset();
//=> currentUTC now: Mon Mar 18 2013 12:54:06
//or
var someUTC = new Date('1998/03/18 13:52'); //=> Wed Mar 18 1998 13:52:00
someUTC.setMinutes(currentUTC.getMinutes()+currentUTC.getTimezoneOffset();
//=> someUTC now: Wed Mar 18 1998 12:52:00
Or as a Date Extension with a one liner:
Date.prototype.UTCFromLocal = function(){
var a;
return new Date(Date.prototype.setMinutes
.call(a = this,a.getMinutes()+a.getTimezoneOffset()));
}
// usage (current date and time = Mon Mar 18 2013 14:08:14 GMT+0100
var d = new Date().UTCFromLocal(); //=> Mon Mar 18 2013 13:08:14
And to retrieve (from a UTC datetime) you could use:
Date.prototype.LocalFromUTC = function(){
var a;
return new Date(Date.prototype.setMinutes
.call(a = this,a.getMinutes()-a.getTimezoneOffset()));
}
Please guide where I am doing wrong..?
You are building a utc_date that is a completely different time, somehow biased by the getTimezoneOffset. Just do
var d = new Date();
d.getTime(); // milliseconds since epoch
or
Date.now();
And if you're working in UTC-land, you should use d.setUTCHours instead of the local-timezone-dependent setHours.
Actually what I was expecting the JS to do was if I pass the timestamp in the Date constructor it should make object w.r.t that timestamp but it converts it to localtimezone which was making issues for me.
So what I did for solving this problem I get the date object by passing the string of the selected date.
var date = new Date(selected_date_str); rather than passing the timestamp
as I was making dropdown of time with UTC timestamp as its value. The start hour:min of dropdown was dynamic, which I was passing as argument in the function, it was from_hr like if I want to create dropdown of time from 20:00 then I pass from_hr = 20
so now I set hour for the selected date
date.setHours(from_hr, 0, 0);
then I made a utc_time variable for making the the value for dropdown
var utc_time = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), from_hr, 0, 0, 0);
this will retain in all timezones, this is what I am going to use as the base. Then in the loop I was adding 15 mins in the time
var count = 0;
jQuery(elem).html('');
while(count <= 95){
var option = '<option value="{0}">{1}:{2}</option>'.format(utc_time/1000, ('0' + date.getHours()).slice(-2), ('0' + date.getMinutes()).slice(-2)); //here i used a format prototype, which you can find in the jsfiddle link of my question
jQuery(elem).append(option);
utc_time += 15 * 60 * 1000; //adding 15 mins in the utc timestamp
date.setMinutes(date.getMinutes() + 15)
count++; }
I was dividing the utc_time with 1000 to make it php compatible, because I was going to retrieve value from here and save in db.

Regarding JavaScript new Date() and Date.parse()

var exampleDate='23-12-2010 23:12:00';
I want to convert above string into a date and have tried a couple things:
var date = new Date(exampleDate); //returns invalid Date
var date1 = Date.parse(exampleDate); //returns NAN
This code is running fine in IE and Opera, but date is returning me an invalid Date and date1 is returning NAN in Firefox. What should I do?
The string in your example is not in any of the standard formats recognized by browsers. The ECMAScript specification requires browsers to be able to parse only one standard format:
The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ
This format includes date-only forms:
YYYY
YYYY-MM
YYYY-MM-DD
It also includes time-only forms with an optional time zone offset appended:
THH:mm
THH:mm:ss
THH:mm:ss.sss
Also included are “date-times” which may be any combination of the above.
If the String does not conform to that format the function may fall back to any
implementation-specific heuristics or implementation-specific date formats. Unrecognizable Strings or dates
containing illegal element values in the format String shall cause Date.parse to return NaN.
So in your example, using 2010-12-23T23:12:00 is the only string guaranteed to work. In practice, most browsers also allow dates of the format DD Month YYYY or Month DD, YYYY, so strings like 23 Dec 2010 and Dec 23, 2010 could also work.
Above format is only supported in IE and Chrome.
so try with another formats. following are some formats and there supporting browsers.
<script type="text/javascript">
//var dateString = "03/20/2008"; // mm/dd/yyyy [IE, FF]
var dateString = "2008/03/20"; // yyyy/mm/dd [IE, FF]
// var dateString = "03-20-2008"; // mm-dd-yyyy [IE, Chrome]
// var dateString = "March 20, 2008"; // mmmm dd, yyyy [IE, FF]
// var dateString = "Mar 20, 2008"; // mmm dd, yyyy [IE, FF]
// Initalize the Date object by passing the date string variable
var myDate = new Date(dateString);
alert(myDate);
</script>
You could parse it manually with a regular expression then call the date constructor with the date elements, as such:
var parseDate = function(s) {
var re = /^(\d\d)-(\d\d)-(\d{4}) (\d\d):(\d\d):(\d\d)$/;
var m = re.exec(s);
return m ? new Date(m[3], m[2]-1, m[1], m[4], m[5], m[6]) : null;
};
var dateStr = '23-12-2010 23:12:00';
parseDate(dateStr).toString(); //=> Thu Dec 23 2010 23:12:00 GMT-0800
JavaScript should support conversion at least from the following dateStrings:
* yyyy/MM/dd
* MM/dd/yyyy
* MMMM dd, yyyy
* MMM dd, yyyy
Try with:
var exampleDate='12/23/2010 23:12:00';
var date = new Date(exampleDate);
Use datejs and this code:
var exampleDate='23-12-2010 23:12:00';
var myDate = Date.parseExact(exampleDate, 'dd-MM-yyyy hh:mm:ss');
myDate should be a correctly constructed Date object.
Just use in this format:
var exampleDate='2010-12-23 23:12:00';
#casablanca has a good answer but it's been 10+ years and this still has a lot of weight in Google so I thought I'd update with a new answer.
TL;DR
// Use an ISO or Unix time string to generate `Month DD, YYYY`
const newDate = new Date('23-12-2010')
const simpleDate = `${newDate.toLocaleString('en-us', { month: 'long' } )} ${newDate.getDate()}, ${newDate.getFullYear()}`
// yields: December, 23 2010 (if you want date suffix, read until the end)
Background: Dates come in a lot of formats, but you're mostly going to receive:
An ISO 8601 format date (YYYY-MM-DDTHH:mm:ss.sssZ) where Z is a UTC timezone offset. You might also get a subset of this (ie, YYYY-MM-DD)
Unix timestamp format date (1539734400), where the number is literally the total amount of milliseconds since the beginning of Unix time, Jan 1st 1970.
Basics: JS has a built-in Date prototype that accepts ISO 8601 and derivatives (of just time or just date). You can instantiate with new Date and return a date object OR you can use the Date.parse() method to return a Unix timestamp.
const dateObj = new Date('23-12-2010:23:12:00') // returns date object
const dateDateOnly = new Date('23-12-2010') // returns date object
const dateTimeOnly = new Date('23:12:00') // returns date object
const dateString = Date.parse('23-12-2010:23:12:00') // returns Unix timestamp string
You can also break the date into 7 parameters: the year, the month (starting from 0), the day, the hour, the minutes, seconds and milliseconds with the time zone offset - NOTE, I've used the multi-params approach only once in my career. Since I'm in Texas I get, UTC-5 (Central Time) when I run the following:
const dateByParam = new Date(2021, 2, 26, 13, 50, 13, 30) // Fri Mar 26 2021 13:50:13 GMT-0500 (Central Daylight Time)
New-ish Stuff toLocaleString: Typically, the return from the Date object is still pretty dense like our last example (Fri Mar 26 2021 13:50:13 GMT-0500 (Central Daylight Time) so additional methods have been added to help developers.
Typically with a date, I want something like March 21st, 2021 - the day and year have been easy to get for a long time:
// Assuming myDate is a JS Date object...
myDate.getDate() // date on the calendar, ie 22
myDate.getDay() // day of the week, where 0 means Sunday, 1 means monday, etc
myDate.getFullYear() // 4 digit year, ie, 2021
But I've always had to build a function to turn getDay into January, February, March, not anymore. toLocaleString() gives you some new superpowers. You can pass it two params, a string for region (ie, en-us) and an object with what you want back (ie, { month: 'long' }). This helps internationalize the response, if need be.
// Again, assuming myDate is a JS Date object...
myDate.toLocaleString('en-us', { month: 'long' } ) // March
Date Suffix I've still seen no built-in way to get the suffix for a date, like th, st, so I built this utility function that uses the modulus % operator to check the divisor of each day number and apply the right suffix (aimed at an American audience but might be the same elsewhere?).
/**
* setDateSuffix()
*
* Desc: Takes two digit date, adds 'st', 'nd', 'rd', etc
*
* #param { integer } num - a number date
*/
export const setDateSuffix = (num) => {
const j = num % 10,
k = num % 100
if (j === 1 && k !== 11) {
return num + "st";
}
if (j === 2 && k !== 12) {
return num + "nd";
}
if (j === 3 && k !== 13) {
return num + "rd";
}
return num + "th";
}
Altogether now.. Long winded way of getting here, but if I am given an ISO or Unix date and I want Month DDth, YYYY, this is what I run:
// setDateSuffix IS NOT PART OF BUILT-IN JS!
const newDate = new Date('23-12-2010')
const simpleDate = `${newDate.toLocaleString('en-us', { month: 'long' } )} ${setDateSuffix(newDate.getDate())}, ${newDate.getFullYear()}`
// yields: December 23rd, 2010
Note - all of this will likely change, hopefully for the better, when temporal becomes a reality in JS: https://github.com/tc39/proposal-temporal. Look forward to somebody's 2030 update of this post!

Categories

Resources