.toLocaleDateString() Inconsistent

Forum Moderators: open

Message Too Old, No Replies

.toLocaleDateString() Inconsistent

almo136

9:47 am on Nov 4, 2011 (gmt 0)

I have the below code which prints out the date which is 10 working days from now. In Opera and Chrome it works as I expected and prints: Thursday, November 17, 2011

However in Firefox (6.0.2) it prints out: 11/17/2011

After a bit of googling I found out that this method is quite inconsistent as it depends on the users locale and settings (even though I got different results on the same machine). Is there a way for me to always get the date to print the string "Day, Month Date, Year?

<script type="text/javascript">
function businessDays(n){
var D=new Date();
var num=Math.abs(n);
var tem,count=0;
var dir= (n<0)? -1: 1;
while(count< num){
D= new Date(D.setDate(D.getDate()+dir));
tem=D.getDay();
if(tem!=0 && tem!=6) ++count;
}
return D;
}
var D=businessDays(10).toLocaleDateString(); //string
document.write(D);
</script>

birdbrain

1:06 pm on Nov 4, 2011 (gmt 0)

Hi there almo136,

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta name="language" content="english"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>today plus some a bit more</title>

<style type="text/css">
body {
  background-color:#f0f0f0;
 }
#plus10 {
  width:330px;
  padding:5px 0;
  text-align:center;
  border:1px solid #999;
  margin:auto;
  box-shadow:#333 5px 5px 10px;
  background-color:#fff;
 }
</style>

<script type="text/javascript">

function plusDays() {

  plusdays=10;   /*edit the value to suit requirements */

  month=['January','February','March','April','May','June','July',
       'August','September','October','November','December'];
  day=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

  now=new Date();
  mm=now.getMonth();
  dd=now.getDate()+plusdays;
  dy=now.getDay();
  yy=now.getFullYear();

  later=new Date(yy,mm,dd)
  dd1=later.getDate();
  nd=later.getDay();
  mm1=later.getMonth();
  yy1=later.getFullYear();

if(dd1<10) {
  dd1='0'+dd1;
 }
  document.getElementById('plus10').firstChild.nodeValue=day[nd]+', '+month[mm1]+' '+dd1+', '+yy1;
 }

  window.addEventListener?
  window.addEventListener('load',plusDays,false):
  window.attachEvent('onload',plusDays);
</script>

</head>
<body>

<div id="plus10">&nbsp;</div>

</body>
</html>

birdbrain

Fotiman

2:31 pm on Nov 4, 2011 (gmt 0)

However in Firefox (6.0.2) it prints out: 11/17/2011

I have Firefox 6.0.1 and this is not what I see. I get "Friday, November 04, 2011"

almo136

2:55 pm on Nov 4, 2011 (gmt 0)

Fotiman - it seems to depend on your user settings. On my Mac I get 11/17/2011 but when I checked a Windows machine I got Friday, November 04, 2011.

Birdman - Thanks! When I tried your solution I just got the next day instead of the next business day. I combined your solution with my old solution and came up with this which seems to work:

<script type="text/javascript">

var plusdays=10;

function businessDays(n){
var D=new Date();
var num=Math.abs(n);
var tem,count=0;
var dir= (n<0)? -1: 1;
while(count< num){
D= new Date(D.setDate(D.getDate()+dir));
tem=D.getDay();
if(tem!=0 && tem!=6) ++count;
}
return D;
}

months=['January','February','March','April','May','June','July',
    'August','September','October','November','December'];
days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

var nd=businessDays(plusdays).getDay();
var mm=businessDays(plusdays).getMonth();
var dd=businessDays(plusdays).getDate();
var yy=businessDays(plusdays).getFullYear();

nextbizday=(days[nd]+', '+months[mm]+' '+dd+', '+yy);

document.write(nextbizday);

</script>

birdbrain

3:01 pm on Nov 4, 2011 (gmt 0)

Hi there Fotiman,

that may well be the case. ;)

These, though, are the results for my testing browsers on Windows7...

IE9 - 18 November 2011
Firefox 7.0.1 - 18 November 2011
Opera 11.52 - 18/11/2011
Safari 5.1.1 - Friday, November 18, 2011

...and on Windows XP...

IE8 - 18 November 2011
Firefox 3.6.23 - 18 November 2011
Opera 11.51 - 18/11/2011
Safari 5.1 - Friday, November 18, 2011

birdbrain

birdbrain

4:01 pm on Nov 4, 2011 (gmt 0)

Hi there almo136,

sorry, I overlooked the "working days" requirement.

Still, there is no good reason to use the outdated document.write for this project.

So here is the modern alternative for those who may be interested. ;)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta name="language" content="english"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>today plus some a bit more</title>

<style type="text/css">
body {
 background-color:#f0f0f0;
 }
#plus10 {
 width:330px;
 padding:5px 0;
 text-align:center;
 border:1px solid #999;
 margin:auto;
 box-shadow:#333 5px 5px 10px;
 background-color:#fff;
 }
</style>

<script type="text/javascript">

function plusDays() {

 plusdays=10; /*edit the value to suit requirements */

 month=['January','February','March','April','May','June','July',
  'August','September','October','November','December'];
 day=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

 now=new Date();
 mm=now.getMonth();
 dd=now.getDate()+plusdays;
 dy=now.getDay();
 yy=now.getFullYear();

 later=new Date(yy,mm,dd);
 dd1=later.getDate();
 nd=later.getDay();
 mm1=later.getMonth();
 yy1=later.getFullYear();
if(nd==0){
 nd=nd+1;
 dd1=dd1+1;
 }
if(nd==6){
 nd=nd-5;
 dd1=dd1+2;
 }
if(dd1<10) {
 dd1='0'+dd1;
 }
 document.getElementById('plus10').firstChild.nodeValue=day[nd]+', '+month[mm1]+' '+dd1+', '+yy1;
 }

 window.addEventListener?
 window.addEventListener('load',plusDays,false):
 window.attachEvent('onload',plusDays);
</script>

</head>
<body>

<div id="plus10">&nbsp;</div>

</body>
</html>

birdbrain

Fotiman

6:06 pm on Nov 4, 2011 (gmt 0)

I would split out the functionality for formatting the date to make the code more modular, portable, and maintainable. I would create a separate function whose sole purpose is taking an instance of a Date object and returning a string containing the formatted representation (the result of which could then be used by document.write or any other method that required a formatted date string).


function dateFormat(d) {
  var month = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ],
    weekday = [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday'
    ];
  
  return weekday[d.getDay()] + ", " + 
    month[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
}

Fotiman

6:16 pm on Nov 4, 2011 (gmt 0)

Along with...


var plusdays=10;

function businessDays(n) {
  var D = new Date(),
    num = Math.abs(n),
    tem,
    count = 0,
    dir = (n < 0)? -1: 1;
  while (count < num) {
    D.setDate(D.getDate() + dir);
    tem = D.getDay();
    if (tem != 0 && tem != 6) {
      ++count;
    }
  }
  return D;
}

var nextbizday = businessDays(plusdays);
document.write(dateFormat(nextbizday));