displaying a calendar to input dates

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • sharmilah
    New Member
    • Jun 2007
    • 20

    displaying a calendar to input dates

    Hi all

    I want to display a calendar so that users can select the date from it to be input in a date field called 'issue date' in my database. Grateful if anyone could let me know how this can be done.

    Thanks
  • sumaabey
    New Member
    • Jun 2007
    • 29

    #2
    check this code

    [code=html]
    <input type="text" name="txtfrmdat e" class='textbox' >

    <a href="javascrip t:show_calendar ('document.frmc ampaign.txtfrmd ate', document.frmcam paign.txtfrmdat e.value);">
    <img src="images/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>

    <script language="javas cript">
    function show_calendar(s tr_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_date time));
    var dt_prev_month = new Date(dt_datetim e);
    dt_prev_month.s etMonth(dt_date time.getMonth()-1);
    var dt_next_month = new Date(dt_datetim e);
    dt_next_month.s etMonth(dt_date time.getMonth() +1);
    var dt_firstday = new Date(dt_datetim e);
    dt_firstday.set Date(1);
    dt_firstday.set Date(1-(7+dt_firstday. getDay()-n_weekstart)%7) ;
    var dt_lastday = new Date(dt_next_mo nth);
    dt_lastday.setD ate(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=\"clsOTab le\" cellspacing=\"0 \" border=\"0\" width=\"100%\"> \n"+
    "<tr><td bgcolor=\"#4682 B4\">\n"+
    "<table cellspacing=\"1 \" cellpadding=\"3 \" border=\"0\" width=\"100%\"> \n"+
    "<tr>\n <td bgcolor=\"#4682 B4\"><a href=\"javascri pt:window.opene r.show_calendar ('"+
    str_target+"', '"+ dt2dtstr(dt_pre v_month)+"'+doc ument.cal.time. value);\">"+
    "<img src=\"images/prev.gif\" width=\"12\" height=\"12\" border=\"0\""+
    " alt=\"previous month\"></a></td>\n"+
    " <td bgcolor=\"#4682 B4\" colspan=\"5\">" +
    "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
    +arr_months[dt_datetime.get Month()]+" "+dt_datetime.g etFullYear()+"</font></td>\n"+
    " <td bgcolor=\"#4682 B4\" align=\"right\" ><a href=\"javascri pt:window.opene r.show_calendar ('"
    +str_target+"', '"+dt2dtstr(dt_ next_month)+"'+ document.cal.ti me.value);\">"+
    "<img src=\"images/next.gif\" width=\"12\" height=\"12\" border=\"0\""+
    " alt=\"next month\"></a></td>\n</tr>\n"
    );

    var dt_current_day = new Date(dt_firstda y);
    // print weekdays titles
    str_buffer += "<tr>\n";
    for (var n=0; n<7; n++)
    str_buffer += " <td bgcolor=\"#87CE FA\">"+
    "<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.get Month() ||
    dt_current_day. getMonth() == dt_firstday.get Month()) {
    // 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.get Date() &&
    dt_current_day. getMonth() == dt_datetime.get Month())
    // print current date
    str_buffer += " <td bgcolor=\"#FFB6 C1\" align=\"right\" >";
    else if (dt_current_day .getDay() == 0 || dt_current_day. getDay() == 6)
    // weekend days
    str_buffer += " <td bgcolor=\"#DBEA F5\" align=\"right\" >";
    else
    // print working days of current month
    str_buffer += " <td bgcolor=\"white \" align=\"right\" >";

    if (dt_current_day .getMonth() == dt_datetime.get Month())
    // print days of current month
    str_buffer += "<a href=\"javascri pt:window.opene r."+str_targe t+
    ".value='"+dt2d tstr(dt_current _day)+"'+docume nt.cal.time.val ue; window.close(); \">"+
    "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
    else
    // print days of other months
    str_buffer += "<a href=\"javascri pt:window.opene r."+str_targe t+
    ".value='"+dt2d tstr(dt_current _day)+"'+docume nt.cal.time.val ue; 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_curr ent_day.getDate ()+1);
    }
    // print row footer
    str_buffer += "</tr>\n";
    }
    // print calendar footer
    str_buffer +=
    "<form name=\"cal\">\n <tr><td colspan=\"7\" bgcolor=\"#87CE FA\">"+
    "<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
    "Time: <input type=\"text\" name=\"time\" value=\""+dt2tm str(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","wid th=200,height=2 25,status=no,re sizable=yes,top =200,left=200") ;
    vWinCal.opener = self;
    var calc_doc = vWinCal.documen t;
    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.get Date()+"-"+(dt_datetime. getMonth()+1)+"-"+dt_datetime.g etFullYear()+" "));
    }
    function dt2tmstr (dt_datetime) {
    return (new String (
    dt_datetime.get Hours()+":"+dt_ datetime.getMin utes()+":"+dt_d atetime.getSeco nds()));
    }

    </script>[/code]

    [Please use CODE tags when posting source code. Thanks! --pbmods]

    Comment

    • sharmilah
      New Member
      • Jun 2007
      • 20

      #3
      I am coding in php and do not have any knowledge of javascript. Could you please tell me what is meant by 'document.frmca mpaign.txt frmdate' and document.frmcam paign.txtfrmdat e.value because when I tried to run the script I got an error on these two items. In fact I have to store the value from the calendar in a field called 'Issue_Dt'.

      Thanks

      Comment

      • sumaabey
        New Member
        • Jun 2007
        • 29

        #4
        document.frmcam paign.txt frmdate' ---

        frmcampaign -is the name of the form
        txtfrmdate-is the field name

        Comment

        • sharmilah
          New Member
          • Jun 2007
          • 20

          #5
          Thanks Sumaabey

          It works. I need some more help. How do I use php to convert the date which is displayed as '26-6-2007 11:21:10' in the format '2007-6-26' to be stored in mysql database.

          Thanks again

          Comment

          • ronnil
            Recognized Expert New Member
            • Jun 2007
            • 134

            #6
            use strtotime() and date() to get the right format
            [CODE=php]
            $time = strtotime('26-6-2007 11:00');

            echo date('Y-n-j',$time); //should produce 2007-6-26
            [/CODE]

            read more by clicking on the two function names :)

            Comment

            • sharmilah
              New Member
              • Jun 2007
              • 20

              #7
              Thanks Ronnil

              It works.

              Comment

              • sumaabey
                New Member
                • Jun 2007
                • 29

                #8
                have any more clarifications


                for ($a = 01; $a < 13; $a++) {

                <option value='$a'>$a</option>

                }

                however it starts at 1, ideally I need it to print...
                01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12

                I tried number_format ,any idea?

                Comment

                Working...