Results 1 to 2 of 2

Thread: Help..delete time from popup calendar

  1. #1
    Join Date
    Sep 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help..delete time from popup calendar

    Hi,

    I downloaded a popup javascript calendar, which is perfect except it has the time in the footer and then in the field the date goes in to once selected.

    I've tried deleting different bits of code but it breaks the calendar. I also would like the field to show "Day, Date, Month and Year"

    Code is below:

    [CODE]

    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()));
    }


    Which is called by:

    [CODE]
    <html lang="en">
    <head>
    <script language="JavaScript" src="ts_picker.js">

    </script>
    </head>
    <body>
    <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>
    </body>
    </html>

    Thanks for any help!

    R

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    I think this does what you want

    HTML Code:
     <script>
    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 height=\"22\" colspan=\"7\" bgcolor=\"#87CEFA\">"+
    "<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
    "<input type=\"hidden\" 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 (""));
    }
    </script>
     </head>
    
    <body>
    
    <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> 
    </body>
    The only change is to the javascript so copy/edit this into your external js file
    Last edited by forum_amnesiac; 09-06-2009 at 09:48 AM.

Bookmarks

Posting Permissions

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