Date Picker in new window : Calendar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Calendar 
Date Picker in new window

 <html>
<script language="JavaScript">

//Script by Denis Gritcyuk: [email protected]
// Title: Timestamp picker
// Description: See the demo at url
// URL: http://us.geocities.com/tspicker/
// Version: 1.0
// Date: 12-05-2001 (mm-dd-yyyy)
// Author: Denis Gritcyuk <[email protected]>; <[email protected]>
// 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() == || 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()));
}



</script>

<form name="tstest">
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</form>

<html>

           
       
datepick.zip( 3 k)
Related examples in the same category
1. HTML Calendar based on DynAPI
2. JavaScript Date Picker based on ComboBox
3. Calendar Control - Single-Select Implementation
4. Calendar Control - 2-Up Implementation
5. Calendar Control - Handling onSelect / onDeselect
6. Calendar Control - Mix/Max Implementation
7. Calendar Control - Multi-Select Implementation
8. Calendar Control - Multi-Select 2-up Implementation
9. Calendar Control - Custom Renderer Example (Holiday Renderer Implementation)
10. Calendar Control - Date Restriction Example (Date Restriction Implementation)
11. Calendar Control - Row Highlight Example (Row Highlight Implementation)
12. Popup calendar
13. Month Calendar
14. Popup Calendar for a textfield
15. Multiselection Calendar
16. Free Date Picker : An easy plugin to add a date picker (calendar) in your web site
17. HTML Date Picker
18. All browser Calendar
19. DHTML Calendar for the impatient
20. Calendar: special day
21. Calendar: day info
22. Calendar: Multiple day selection
23. Calendar with different theme
24. Calendar with image for each month
25. Fancy Calendar
26. Another Calendar
27. Date Time Picker
28. Month Calendar (2)
29. Building a Calculator
30. A Dynamic Calendar Table
31. Dynamic HTML Calendar
32.  A Static Calendar by JavaScript
33. Displaying the Calendar
34. Calendar (IE only)
35. Calendar in slide tab
36. Another DHTML Calendar
37. Event Calendar
38. Open calendar
ww_w.___j__a__v_a2s__.c__om___ | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.