0

I have this code to produce a date/time picker but I only need to use the date picker element of this code.

How would do I remove the time picker element from this code and stilll have it work?

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

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

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";

str_buffer += "</tr>\n";
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
    dt_current_day.getMonth() == dt_firstday.getMonth()) {

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

                str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">";
            else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)

                str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">";
            else

                str_buffer += " <td bgcolor=\"white\" align=\"right\">";

            if (dt_current_day.getMonth() == dt_datetime.getMonth())

                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 

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

    str_buffer += "</tr>\n";
}

This section bilds the forms but when I remover the time element out of the form it doesn't work properly? The date picker will appear but won't close after I remover the time picker element! How do I fix this?

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


    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.getFullYear()+"/"+(dt_datetime.getMonth()+1)+"/"+dt_datetime.getDate()));
 }
 function dt2tmstr (dt_datetime) {
return (new String (
dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
 }
stuart
  • 11
  • 4
  • using another date picker that is documented and has parameters that can set the date format (include/exclude time) is an option? – Gavriel Apr 11 '12 at 11:37
  • 1
    +1 flocsy because this code is so difficult to follow. I gave up on this code 10 mins ago, but hung around for morbid curiousity. The changes required to get this to work without time require pretty much the whole thing to be changed. Hence +1 to flocsy. – Kias Apr 11 '12 at 11:49

2 Answers2

0

Sorry but this code is horrible. It is better to rewrite it entirely. I would suggest:

  • At least separate presentation from data and logic. The simplest (though quite rough) way is to leave all (formatted) html in one var. Do not append/build it. Get necessary data containinig elements and manipulate them i.e.(just a concept):

    var $layout = $('<form>'+
                        '<div/>' +
                         ....
                    '</form>'),
        $dateInput = $layout.find('input[name="date"]');
    
    .....
    
    $dateInput.val(date);
    

    ;

  • Better to use existing solutions for datapicking

Vlad Minaev
  • 585
  • 4
  • 10
0

some libs:

http://javascriptcalendar.org/javascript-date-picker.php http://www.javascriptkit.com/script/script2/tengcalendar.shtml http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html

Gavriel
  • 18,880
  • 12
  • 68
  • 105
  • I'd just like to say thanks for all of your comments. I too have gave up on this. It's far easier to implement a datepicker via javascript. – stuart Apr 11 '12 at 16:15