PDA

View Full Version : how to change date format in script



Benq
10-09-2010, 11:10 PM
I have a script that returns the amount of days between 2 dates and I am trying to figure out how to change the date input format to dd/mm/yyy format instead of mm/dd/yyyy

here is the script

Head Code

<title>Datediff</title>

<script type='text/javascript'>
var msPerSec = 1000 // # milliseconds / Second
var secPerMin = 60 // # Seconds / Minute
var secPerHr = 60 * secPerMin // # Seconds / Hour
var secPerDay = 24 * secPerHr // # Seconds / Day
var secPerYr = 365.25 * secPerDay // # Seconds / Year

function field( id ) {
var ele = document.getElementById( id )
if ( !ele ) {
alert( 'Element not found. id="' + id + '"' )
}
return ele
}

function setVal( id, val ) {
var ele = field( id )
if ( ele ) {
ele.innerHTML = val
}
}

function getVal( id ) {
var ele = field( id )
var result = null
if ( ele ) {
result = ele.value
}
return result
}

function CalculateDiff( d1, d2 ) {
var date1 = new Date( getVal( d1 ) )
var date2 = new Date( getVal( d2 ) )
var diff = Math.floor( Math.abs( date2 - date1 ) / msPerSec )

var years = Math.floor( diff / secPerYr )

var rest = diff - years * secPerYr
var days = Math.floor( rest / secPerDay )
setVal( 'days' , days )
rest = rest - days * secPerDay
var hours = Math.floor( rest / secPerHr )
rest = rest - hours * secPerHr
var mins = Math.floor( rest / secPerMin )
rest = rest - mins * secPerMin



}
</script>

Body COde


<form name='' action=''>
<br>Date 1 <input type='text' value='11/01/2006' id='date1'/>
<br>Date 2 <input type='text' value='12/29/2007' id='date2'/>
<br>
<input type='button' value='Calculate difference' onclick='CalculateDiff("date1","date2");'>
<br> Calculated Difference
<table border='1'>

<tr>
<th>Days </th><td><textarea name='days' rows='1' cols='8' id='days'>&nbsp;&nbsp;&nbsp;</textarea></td>
</tr>

</table>
</form>

any help would be greatly appreciated. Thanks in advance.

jscheuer1
10-10-2010, 05:46 AM
I think you mean to dd/mm/yyyy, not dd/mm/yyy as you have in your post:


change the date input format to dd/mm/yyy format

If you did that 2010 would be the same as 3010 and/or be meaningless as to the year. Maybe that's what you want. But I'm going to assume you mean dd/mm/yyyy.

Anyways, in terms of logical systems, as far as I know numbers are the only universal language. But even the symbols used to represent them vary. In this case you aren't dealing with numbers per se, rather a string which contains number characters. So, we cannot assume anything. Generally the javascript Date() object expects a string or a number of milliseconds. If it's a string, various formats are acceptable. Conceivably even this could vary on different computers, though I'm not aware of that happening. Your code uses a string. With the nn/nn/nnnn format you are limited to mm/dd/yyyy, unless something is done to change that.

We can accept dd/mm/yyyy and rearrange it to the expected mm/dd/yyyy here by changing:


function getVal( id ) {
var ele = field( id )
var result = null
if ( ele ) {
result = ele.value
}
return result
}

to:


function getVal( id ) {
var ele = field( id )
var result = null
if ( ele && ele.value && /^\d{2}\/\d{2}\/\d{4}$/.test(ele.value) ) {
result = ele.value.split('/');
result = [result[1], result[0], result[2]].join('/');
}
return result
}

Benq
10-10-2010, 05:52 AM
Hi John,

yes I did mean yyyy and thnaks very much for your quick and precise response it works well.

thankyou very very much I appreciate the fact you have fixed it for me.

jscheuer1
10-10-2010, 07:22 AM
You're welcome. I just realized though that, since months in javascript are calculated using 0 for January, not 1 as is assumed by the code, we need to make that adjustment:


function getVal( id ) {
var ele = field( id )
var result = null
if ( ele && ele.value && /^\d{2}\/\d{2}\/\d{4}$/.test(ele.value) ) {
result = ele.value.split('/');
result = [result[1] - 1, result[0], result[2]].join('/');
}
return result
}

Benq
10-12-2010, 01:42 AM
Hi Jonh

I have realised the code I originally posted doesnt cater for leap years and I have this code that is already in ddmmyyyy format, do you know how I would change it so I could have the option of mmddyyyy format as well as my ddmmyyyy format


<html>
<head>

<script type='text/javascript'>

//****************************************************************//
// FUNCTION: isDate (dateStr) //
// //
// This function takes a string variable and verifies if it is a //
// valid date or not. Dates must be in the format of dd-mm-yyyy //
// or dd/mm/yyyy. It checks to make sure the month has the proper //
// number of days, based on the month. The function returns true //
// if a valid date, false if not. //
// //
// Day/Month must be 1 or 2 digits, Year must be 2 or 4 digits. //
//****************************************************************//
function isDate(dateStr)
{
var datePattern = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/
var matchArray = dateStr.match(datePattern);

//Check valid format
if (matchArray == null) { return false; }

day = matchArray[1];
month = matchArray[3];
year = matchArray[5];

// check month range
if (month < 1 || month > 12) { return false; }

//Check day range
if (day < 1 || day > 31) { return false; }

//Check months with 30 days
if ((month==4 || month==6 || month==9 || month==11) && day>30) { return false; }

//Check Feb days
if (month == 2)
{
var leapYr = (year%4 == 0 && (year%100 != 0 || year%400 == 0));
if (day > 29 || (day==29 && !leapYr)) { return false; }
}

return true;
}

function getDateObj(dateStr)
{
var datePattern = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/
var matchArray = dateStr.match(datePattern);
var dateObj = new Date(matchArray[4], matchArray[3]-1, matchArray[1], 12, 0, 0);
return dateObj;
}

//***************************************************************//
// FUNCTION: dateDiff(Date1Obj, Date2Obj, [units], [precision]) //
// //
// Returns the difference between two date objects in the units //
// specified (optional, default is days). The optional precision //
// parameter determines the number of decimal places the result //
// will be rounded to. Note: When the 'days' units is used and //
// precision is 0, then output will be in calendar days. //
// //
// The units parameter includes the following: d=days (default), //
// h = hours, m = minutes, s = seconds, ms = milliseconds //
//***************************************************************//
function dateDiff(date1Obj, date2Obj, units, precision)
{
//set the default untis
var units = (units)?units:'d';
var calcPrecision = (precision)?Math.pow(10, precision) : 1;

//Calculate the units divisor
switch (units)
{
case 'ms': //Milliseconds
var units = 1;
break;
case 's': //Seconds
var units = 1000;
break;
case 'm': //Minutes
var units = 1000 * 60;
break;
case 'h': //hours
var units = 1000 * 60 * 60;
break;
case 'd': //Calendar Days
default:
var units = 1000 * 60 * 60 * 24;
//Normalize time to 12:00am to count calendar days if precision = 0
if (precision==0)
{
date1Obj.setHours(0);
date2Obj.setHours(0);
}
break;
}
//Convert dates to milliseconds
var date1ms = date1Obj.getTime();
var date2ms = date2Obj.getTime();

//Calculate the difference in selected units
var difference = (date2ms - date1ms) / units;

//Convert to precision parameter
difference = (Math.round(difference*calcPrecision))/calcPrecision;

return difference;

}

function CalculateDiff(date1ID, date2ID)
{
var date1Val = getVal(date1ID);
var date2Val = getVal(date2ID);

if(!isDate(date1Val) || !isDate(date2Val))
{
return false;
}

setVal('days', dateDiff(getDateObj(date1Val), getDateObj(date2Val)));
return;
}

function field(id)
{
var ele = document.getElementById( id );
if ( !ele )
{
alert( 'Element not found. id="' + id + '"' );
}
return ele;
}

function setVal(id, val)
{
var ele = field(id);
if (ele)
{
ele.innerHTML = val;
}
}

function getVal(id)
{
var ele = field(id);
var result = null
if (ele)
{
result = ele.value;
}
return result;
}

</script>

</head>
<body>

<form name='' action=''>
<br>Date 1 <input type='text' value='12/10/2010' id='date1'/>
<br>Date 2 <input type='text' value='14/10/2010' id='date2'/>
<br>
<input type='button' value='Calculate difference' onclick='CalculateDiff("date1","date2");'>
<br> Calculated Difference
<table border='1'>

<tr>
<th>Days </th><td><textarea name='days' rows='1' cols='8' id='days'>&nbsp;&nbsp;&nbsp;</textarea></td>
</tr>

</table>
</form>

</body>
</html>

jscheuer1
10-12-2010, 03:09 PM
<html>
<head>

<script type='text/javascript'>

//****************************************************************//
// FUNCTION: isDate (dateStr) //
// //
// This function takes a string variable and verifies if it is a //
// valid date or not. Dates must be in the format of dd-mm-yyyy //
// or dd/mm/yyyy. It checks to make sure the month has the proper //
// number of days, based on the month. The function returns true //
// if a valid date, false if not. //
// //
// Day/Month must be 1 or 2 digits, Year must be 2 or 4 digits. //
//****************************************************************//
function isDate(dateStr, method)
{
var datePattern = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/
var matchArray = dateStr.match(datePattern), m = method === 'mm'? 1 : 3, d = m === 1? 3 : 1;

//Check valid format
if (matchArray == null) { return false; }

day = matchArray[d];
month = matchArray[m];
year = matchArray[5];

// check month range
if (month < 1 || month > 12) { return false; }

//Check day range
if (day < 1 || day > 31) { return false; }

//Check months with 30 days
if ((month==4 || month==6 || month==9 || month==11) && day>30) { return false; }

//Check Feb days
if (month == 2)
{
var leapYr = (year%4 == 0 && (year%100 != 0 || year%400 == 0));
if (day > 29 || (day==29 && !leapYr)) { return false; }
}

return true;
}

function getDateObj(dateStr, method)
{
var matchArray = dateStr.split('/'), m = method === 'mm'? 0 : 1, d = !m? 1 : 0;
--matchArray[m];
var dateObj = new Date(matchArray[2], matchArray[m], matchArray[d], 12, 0, 0);
return dateObj;
}

//***************************************************************//
// FUNCTION: dateDiff(Date1Obj, Date2Obj, [units], [precision]) //
// //
// Returns the difference between two date objects in the units //
// specified (optional, default is days). The optional precision //
// parameter determines the number of decimal places the result //
// will be rounded to. Note: When the 'days' units is used and //
// precision is 0, then output will be in calendar days. //
// //
// The units parameter includes the following: d=days (default), //
// h = hours, m = minutes, s = seconds, ms = milliseconds //
//***************************************************************//
function dateDiff(date1Obj, date2Obj, units, precision)
{
//set the default untis
var units = (units)?units:'d';
var calcPrecision = (precision)?Math.pow(10, precision) : 1;

//Calculate the units divisor
switch (units)
{
case 'ms': //Milliseconds
var units = 1;
break;
case 's': //Seconds
var units = 1000;
break;
case 'm': //Minutes
var units = 1000 * 60;
break;
case 'h': //hours
var units = 1000 * 60 * 60;
break;
case 'd': //Calendar Days
default:
var units = 1000 * 60 * 60 * 24;
//Normalize time to 12:00am to count calendar days if precision = 0
if (precision==0)
{
date1Obj.setHours(0);
date2Obj.setHours(0);
}
break;
}
//Convert dates to milliseconds
var date1ms = date1Obj.getTime();
var date2ms = date2Obj.getTime();

//Calculate the difference in selected units
var difference = (date2ms - date1ms) / units;

//Convert to precision parameter
difference = (Math.round(difference*calcPrecision))/calcPrecision;

return difference;

}

function CalculateDiff(date1ID, date2ID)
{
var date1Val = getVal(date1ID);
var date2Val = getVal(date2ID);
var method = document.getElementById('method').checked? 'mm' : 'dd';

if(!isDate(date1Val, method) || !isDate(date2Val, method))
{
setVal('days', '');
alert('Invalid Input Date(s) and/or Invalid Date Format');
return false;
}

setVal('days', dateDiff(getDateObj(date1Val, method), getDateObj(date2Val, method)));
return;
}

function field(id)
{
var ele = document.getElementById( id );
if ( !ele )
{
alert( 'Element not found. id="' + id + '"' );
}
return ele;
}

function setVal(id, val)
{
var ele = field(id);
if (ele)
{
ele.innerHTML = val;
}
}

function getVal(id)
{
var ele = field(id);
var result = null;
if (ele)
{
result = ele.value;
}
return result;
}

</script>

</head>
<body>

<form name='' action=''>
<br>Date 1 <input type='text' value='12/10/2010' id='date1'/>
<br>Date 2 <input type='text' value='14/10/2010' id='date2'/>
<br>Toggle Date Format <input type="checkbox" id="method" value="" onclick="document.getElementById('themethod').innerHTML = this.checked? 'mm/dd/yyyy' : 'dd/mm/yyyy';"> (currently:
<script type="text/javascript">
document.write('<span id="themethod">' + (document.getElementById('method').checked? 'mm/dd/yyyy' : 'dd/mm/yyyy') + '<\/span>');
</script>)
<br>
<input type='button' value='Calculate difference' onclick='CalculateDiff("date1","date2");'>
<br> Calculated Difference
<table border='1'>

<tr>
<th>Days </th><td><textarea name='days' rows='1' cols='8' id='days'>&nbsp;&nbsp;&nbsp;</textarea></td>
</tr>

</table>
</form>

</body>
</html>

Zdeamon
08-16-2014, 09:25 PM
Hello Could you help me or give me some Pointers on my website.

http://zkillingfloor.bugs3.com/

Please note the name of the link Doesn't match the site Im aware of that.

Also The links have not bean changed yet As i plan on hosting On my own Web host and the site is on a temporary host to show people what ive bean up too.

Please Note i am aware of the Website Style sheet not supporting Other browsers other than FireFox.

I need help with my clocks

I want to have 2 clocks on my website one for China Time and USA time as server time.