about calender in javascript

Adwait Chitaley
Adwait Chitaley used Ask the Experts™
on
this script is used for making calender with timestamp
i used this calender working properly
i have to add one validation in this script but i m not understanding how to do this please help me

calender take the value after date 31 i want to validate this scenario
 means if user enter date 41-07-2009 its takes the value as 10-08-2009 after form submit
 but i want to validate that the user cant give the date more than  30,31,28 as depending upon  the month ..
 please help me its urgent
// 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-19-2003 (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 = ["Januar", "Februar", "Mýrz", "April", "Mai", "Juni",
		"Juli", "August", "September", "Oktober", "November", "December"];
	var week_days = ["So", "Mo", "Di", "Mi", "Do", "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>Kalender</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\">"+
		"Zeit: <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("", "Kalender", 
		"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));
	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()));
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
hey experts what happen please give me some solution

Author

Commented:
please tell me some solution for this question also....
Software Engineer
Commented:
Given a date string, the easiest way to see if the user specified date is "valid" is to:

- Use a regular expression to verify that the input fits the expected pattern
  e.g., MM/DD/YYYY, or DD/MM/YY, or something like that.
- Use the javascript date object constructor to create a date using this info
- Format the date object using the same pattern
- Compare the user input to the formatted information.

From the information provided above, it appears that you expect the input to be in the form:

DD-MM-YYYY

For example, something like this perhaps.
<html>
<body>
 
Date: <input type='text' onchange='validate(this)'>
 
<script type="text/javascript">
  function validate( obj ) {
    function D2( val ) {
      return ( ( val ) < 10 ? '0' : '' ) + val;
    }
    function DMY2Str( D, M, Y ) {
      return D2( D ) + '-' + D2( M ) + '-' + Y
    }
    if ( obj ) {
      if ( 'value' in obj ) {
        var val = obj.value;
        if ( /^\d{1,2}-\d{1,2}-(\d{2}|\d{4})$/.test( val ) ) {
          var info = val.split( '-' );
          var M = ( info[ 1 ] * 1 ) - 1;
          var D = info[ 0 ] * 1;
          var Y = info[ 2 ] * 1;
          var when = new Date( Y, M, D );
          var wM = when.getMonth() + 1;
          var wD = when.getDate();
          var wY = when.getFullYear();
          if ( DMY2Str( D, M, Y ) == DMY2Str( wD, wM, wY ) ) {
            alert( 'valid' );
          } else {
            alert( 'invalid date specified:' + when );
          }
        } else {
          alert( 'validate() error - Invalid date value.' );
        }
      } else {
        alert( 'validate() error - Required object attribute ("value") missing.' );
      }      
    } else {
      alert( 'validate() error - Required object missing.' )
    }
  }
</script>
 
</body>
</html>

Open in new window

Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Author

Commented:
its working fine but i want validation in my code can u give me??
 validation like user can not give the day value more than 28,30,31 depending  upon the month

    please help me.....

Author

Commented:
U r not giving me proper reply sorry for that
HonorGodSoftware Engineer

Commented:
A solution to the question "How to verify that the user specified a valid date" was provided (http://#a24877910).

Author

Commented:
thaaks
HonorGodSoftware Engineer

Commented:
Thank you for the grade and points.

I'm sorry that we may not be trying to solve the same issue.

Hopefully you will be able to get the absolute best answer for your issue.

Good luck & have a great day.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial