Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Date Question

  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Date Question

    Hello,

    I'm still really new to Javascript and need the help of an expert.

    I found the following script, for a date picker, however, how can it be modified such that the date selected is output into the date format of

    dd/mm/yyyy,

    I also don't need the time, so how could I get the chosen date into that format and ignore the time?

    Code:
    // Title: Timestamp picker
    // Description: See the demo at url
    // URL: http://us.geocities.com/tspicker/
    // Script featured on: http://javascriptkit.com/script/script2/timestamp.shtml
    // Version: 1.0
    // Date: 12-05-2001 (mm-dd-yyyy)
    // Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com>
    // Notes: Permission given to use this script in any kind of applications if
    //    header lines are left unchanged. Feel free to contact the author
    //    for feature requests and/or donations
    
    function show_calendar(str_target, str_datetime) {
    	var arr_months = ["January", "February", "March", "April", "May", "June",
    		"July", "August", "September", "October", "November", "December"];
    	var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
    	var n_weekstart = 1; // day week starts from (normally 0 or 1)
    
    	var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
    	var dt_prev_month = new Date(dt_datetime);
    	dt_prev_month.setMonth(dt_datetime.getMonth()-1);
    	var dt_next_month = new Date(dt_datetime);
    	dt_next_month.setMonth(dt_datetime.getMonth()+1);
    	var dt_firstday = new Date(dt_datetime);
    	dt_firstday.setDate(1);
    	dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
    	var dt_lastday = new Date(dt_next_month);
    	dt_lastday.setDate(0);
    	
    	// html generation (feel free to tune it for your particular application)
    	// print calendar header
    	var str_buffer = new String (
    		"<html>\n"+
    		"<head>\n"+
    		"	<title>Calendar</title>\n"+
    		"</head>\n"+
    		"<body bgcolor=\"White\">\n"+
    		"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
    		"<tr><td bgcolor=\"#4682B4\">\n"+
    		"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
    		"<tr>\n	<td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
    		str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+
    		"<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"previous month\"></a></td>\n"+
    		"	<td bgcolor=\"#4682B4\" colspan=\"5\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
    		+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
    		"	<td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
    		+str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+
    		"<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
    		" alt=\"next month\"></a></td>\n</tr>\n"
    	);
    
    	var dt_current_day = new Date(dt_firstday);
    	// print weekdays titles
    	str_buffer += "<tr>\n";
    	for (var n=0; n<7; n++)
    		str_buffer += "	<td bgcolor=\"#87CEFA\">"+
    		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
    		week_days[(n_weekstart+n)%7]+"</font></td>\n";
    	// print calendar table
    	str_buffer += "</tr>\n";
    	while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
    		dt_current_day.getMonth() == dt_firstday.getMonth()) {
    		// print row heder
    		str_buffer += "<tr>\n";
    		for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
    				if (dt_current_day.getDate() == dt_datetime.getDate() &&
    					dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print current date
    					str_buffer += "	<td bgcolor=\"#FFB6C1\" align=\"right\">";
    				else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
    					// weekend days
    					str_buffer += "	<td bgcolor=\"#DBEAF5\" align=\"right\">";
    				else
    					// print working days of current month
    					str_buffer += "	<td bgcolor=\"white\" align=\"right\">";
    
    				if (dt_current_day.getMonth() == dt_datetime.getMonth())
    					// print days of current month
    					str_buffer += "<a href=\"javascript:window.opener."+str_target+
    					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
    				else 
    					// print days of other months
    					str_buffer += "<a href=\"javascript:window.opener."+str_target+
    					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
    					"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
    				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
    				dt_current_day.setDate(dt_current_day.getDate()+1);
    		}
    		// print row footer
    		str_buffer += "</tr>\n";
    	}
    	// print calendar footer
    	str_buffer +=
    		"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
    		"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
    		"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
    		"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
    		"</table>\n" +
    		"</tr>\n</td>\n</table>\n" +
    		"</body>\n" +
    		"</html>\n";
    
    	var vWinCal = window.open("", "Calendar", 
    		"width=200,height=250,status=no,resizable=yes,top=200,left=200");
    	vWinCal.opener = self;
    	var calc_doc = vWinCal.document;
    	calc_doc.write (str_buffer);
    	calc_doc.close();
    }
    // datetime parsing and formatting routimes. modify them if you wish other datetime format
    function str2dt (str_datetime) {
    	var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
    	if (!re_date.exec(str_datetime))
    		return alert("Invalid Datetime format: "+ str_datetime);
    	return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
    }
    function dt2dtstr (dt_datetime) {
    	return (new String (
    			dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
    }
    function dt2tmstr (dt_datetime) {
    	return (new String (
    			dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
    }
    Thanks for everyones help.

    Cheers,

    J

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    // Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com>

    // datetime parsing and formatting routimes. modify them if you wish other datetime format

    Have you tried asking the author?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    First of all I have used this library to implement your need. So please take a look at it to know how to manipulate the formats.

    I have added a parameter to the method show_calendar.

    I have added as well an html file that contains a sample.

    in the html file just change the date format to the one needed.

    Let me know what happens
    Attached Files Attached Files
    Software and cathedrals are much the same - first we build them, then we pray.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Well, he tells you where to modify:
    Code:
    // datetime parsing and formatting routimes. modify them if you wish other datetime format
    so:
    Code:
    function str2dt (str_datetime) {
            // he allowed only - between date part; I allow - or / or .
            // and at your request, I removed the requirement for h:m:s
    	var re_date = /^(\d+)[\/\.\-](\d+)[\/\.\-](\d+)$/;
    	if (!re_date.exec(str_datetime))
    		return alert("Invalid Datetime format: "+ str_datetime);
            // and I swapped month and day...now looks for mm/dd/yyyy
    	return new Date(RegExp.$3, RegExp.$1-1, RegExp.$2);
    }
    function dt2dtstr (dt) {
            // changed order here to m/d/y
    	return new String ( (dt.getMonth()+1)+"/"+dt.getDate()+"/"+dt.getFullYear() );
    }
    You know, I hope, that code is pretty ancient: 12-05-2001

    It's not the most modern/best practice way to do some of this stuff.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    Quote Originally Posted by Philip M View Post
    // Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com>

    // datetime parsing and formatting routimes. modify them if you wish other datetime format

    Have you tried asking the author?
    Not likely that those email addresses are still valid, since the code is over 10 years old.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Old Pedant View Post
    Not likely that those email addresses are still valid, since the code is over 10 years old.

    Well, I have sent a test email and have had a very rapid response from Denis.
    But you have answered the question.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    That's pretty amazing, actually. I thought I was the only one whose 13-year-old email addresses still works. (Well, some of them, anyway.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,146
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by Old Pedant View Post
    That's pretty amazing, actually. I thought I was the only one whose 13-year-old email addresses still works. (Well, some of them, anyway.)
    Why? I have had the same email address for 15 years.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,492 Times in 4,456 Posts
    That *WAS* a mildly facetious comment, you know. <grin/>

    I guess people who have their own domain tend to keep the same email addresses. It's mostly people who utilize things like aol.com, msn.com, etc., who change addresses all the time.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •