Forum:

How to set timer for select the time am to pm on front end in a jsp page like calender for date?

Ranch Hand

Posts: 214

posted 7 years ago

Hi experts,

I have a jsp page in this I wanna a timesetter to set the time for booking any facility from and to.

my page is here:

<%-- 
    Document   : FacilityBooking
    Created on : Apr 15, 2011, 5:59:15 PM
    Author     : user03
--%>
<%@ page import="java.sql.*,src.*,java.util.Date,java.text.SimpleDateFormat"%>
<jsp:include page="header.jsp"/>
<%
 String username=(String)session.getAttribute("user");
 System.out.println("Username is "+username);
 if(username==null)
     {
     response.sendRedirect("error.jsp");
     }
 %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Booking</title>
            <link href="stylesheet/fac_css.css" rel="stylesheet" type="text/css"/>
          <script type="text/javascript" language="javascript">
              function Get_ResidentNameMeter_no(div_id,content_id,object)
                         {
                                            subject_id = div_id;
                                            str=object;

var randomnumber=Math.floor(Math.random()*999999);
                                            content = document.getElementById(content_id).value;

if (window.XMLHttpRequest)
                                              {
                                                // code for Mozilla, Safari, etc
                                                http=new XMLHttpRequest();
                                                http.open("POST","get_residentName_Booking_Facility_servlet?content="+content+ "&randomnum=" + randomnumber, true);
                                              }//If close
                                            else if (window.ActiveXObject)
                                            {
                                                http=new ActiveXObject('Microsoft.XMLHTTP');
                                                if (http)
                                                {
                                                    http.open("POST","get_residentName_Booking_Facility_servlet?content="+content+ "&randomnum=" + randomnumber, false);
                                                }
                                            }
                                            http.onreadystatechange = handleHttpResponse44;
                                            http.send(null);
                                            if(content.length>0){
                                                box12('1');
                                            }
                                            else{
                                                box12('0');
                                            }

}
                           function box12(act)
                                {
                                    if(act=='0')
                                    {
                                        document.getElementById('tr1').style.display = 'none';
                                        document.getElementById('box12').style.display = 'none';
                                    }
                                    else{
                                        document.getElementById('tr1').style.display = 'block';
                                        document.getElementById('box12').style.display = 'block';
                                    }
                                }
                                function handleHttpResponse44()
                                {
                                    if (http.readyState == 4) {

if (subject_id != '')
                                            {
                                              document.getElementById('box12').innerHTML = http.responseText;
                                            }
                                }
                                }
                                function highlight44(action,obj)
                                {
                                    if(action)	{
                                        obj.style.backgroundColor = '#CECEFF'
                                        return true;
                                    }
                                    else{
                                        obj.style.backgroundColor = '#FFFFFF'
                                        return true;
                                    }
                                }
                            function display44(obj)
                                           {
                                            var x=obj.innerHTML.split("#");
                                            document.getElementById('res').value=x[0];
                                            document.getElementById('flat').value=x[1];
                                            document.getElementById('ctn').value=x[2];
                                            document.getElementById('content').value=obj.innerHTML;
                                            document.getElementById('box12').style.display = 'none';
                                            document.getElementById('tr1').style.display = 'none';
                                            return true;
                                          }
                    function load2()
                            {
                             window.open("appartment.jsp");
                            }
              function complent_type()
              {
                  if(document.getElementById("comp").value=="Other")
                      {
                          document.getElementById("cmrmrk").style.display="";
                      }
                      else{
                          document.getElementById("cmrmrk").style.display="none";
                      }
              }

//calender
        var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        var days = new Array("S", "M", "T", "W", "T", "F", "S");
        today = new getToday();
        var element_id;
        function getDays(month, year)
        {
            // Test for leap year when February is selected.
            if (1 == month)
                return ((0 == year % 4) && (0 != (year % 100))) ||
                (0 == year % 400) ? 29 : 28;
            else
                return daysInMonth[month];
        }

function getToday()
        {
            // Generate today's date.
            this.now = new Date();
            this.year = this.now.getFullYear() ; // Returned year XXXX
            this.month = this.now.getMonth();
            this.day = this.now.getDate();
        }

function newCalendar()
        {
            var parseYear = parseInt(document.getElementById('year') [document.getElementById('year').selectedIndex].text);
            var newCal = new Date(parseYear , document.getElementById('month').selectedIndex, 1);
            var day = -1;
            var startDay = newCal.getDay();
            var daily = 0;

today = new getToday(); // 1st call
            if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
            {
                day = today.day;
            }
            // Cache the calendar table's tBody section, dayList.
            var tableCal = document.getElementById('calendar').tBodies.dayList;

var intDaysInMonth =
                getDays(newCal.getMonth(), newCal.getFullYear() );

for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)

for (var intDay = 0; intDay < tableCal.rows[intWeek].cells.length;intDay++)
        {
            var cell = tableCal.rows[intWeek].cells[intDay];

// Start counting days.
            if ((intDay == startDay) && (0 == daily))
            {
                daily = 1;
            }

// Highlight the current day.
            cell.style.color = (day == daily) ? "white" : "";
            cell.style.backgroundColor = (day == daily) ? "red" : "white";
            if((day == daily)){cell.style.backgroundColor="red";}
            else{cell.style.backgroundColor="white";}
            if(day == daily)
            {
                document.getElementById('todayday').innerHTML= "Today: " +  day + "-" +
                    (newCal.getMonth()+1) + "-" + newCal.getFullYear() ;
            }
            var dd;
            // Output the day number into the cell.
            if ((daily > 0) && (daily <= intDaysInMonth)){
                if(daily==1 || daily==2 || daily==3 || daily==4 || daily==5 || daily==6 || daily==7 || daily==8 || daily==9)
                {
                    dd='0'+daily;
                }else{
                    dd=daily;
                }
                if (navigator.appName=="Microsoft Internet Explorer") {

cell.innerText = dd;
                }
                else {

cell.textContent = dd;
                }
                daily++;

}
            else
                {
                cell.innerText = "";
                }
        }
    }

function getTodayDay()
    {
        document.getElementById(element_id).value = today.day + "-" + (today.month+1) +
            "-" + today.year;
        //document.all.calendar.style.visibility="hidden";
        document.getElementById('calendar').style.display="none";
        document.getElementById('year').selectedIndex =100;
        document.getElementById('month').selectedIndex = today.month;
    }

shift[0] = x;
        shift[1] = y;
        return  x;
    }

function SetCalendarOnElement(el_name)
    {
        if (el_name=="")
            el_name = element_id;
        var shift = new Array(2);
        GetBodyOffsetX(el_name, shift);
        document.getElementById('calendar').style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;
        document.getElementById('calendar').style.pixelTop = shift[1] + 25 ;
    }

function ShowCalendar(elem_name)
    {
        if (elem_name=="")
            elem_name = element_id;

element_id	= elem_name; // element_id is global variable
        newCalendar();
        SetCalendarOnElement(element_id);
        //document.all.calendar.style.visibility = "visible";
        document.getElementById('calendar').style.display='inline';
    }

function HideCalendar()
    {
        //document.all.calendar.style.visibility="hidden";
        document.getElementById('calendar').style.display='none';
    }

</TBODY>
                                                                                        <TBODY>
                                                                                            <TR>
                                                                                                <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
                                                                                                <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
                                                                                            </TR>
                                                                                        </TBODY>

</TABLE>
                                                                                </td>
                                                                                <td><TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar1 style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4" ALIGN="center">
                                                                                        <TBODY>
                                                                                        <TR>
                                                                                            <TD colSpan=7 vAlign=center>
                                                                                                
                                                                                                <SELECT id=month1 onchange=newCalendar1()>
                                                                                                    <SCRIPT TYPE="text/javascript" language=JavaScript>
                                                                                                    for (var intLoop = 0; intLoop < months.length; intLoop++)
                                                                                                        document.write("<OPTION " +	(today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
                                                                                                    </SCRIPT>
                                                                                                </SELECT>

<SELECT id=year1 onchange=newCalendar1()>
                                                                                                    <SCRIPT TYPE="text/javascript" language=JavaScript>
                                                                                                    // Output years into the document.
                                                                                                    // Select current year.
                                                                                                    for (var intLoop = 1900; intLoop < 2028; intLoop++)
                                                                                                        document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
                                                                                                    </SCRIPT>
                                                                                                </SELECT>

</TD>
                                                                                        </TR>
                                                                                        <TR class=days>
                                                                                            
                                                                                            <SCRIPT TYPE="text/javascript" language=JavaScript>
                                                                                            // Output days.
                                                                                            for (var intLoop = 0; intLoop < days.length; intLoop++)
                                                                                                document.write("<TD>" + days[intLoop] + "</TD>");
                                                                                            </SCRIPT>
                                                                                        </TR>
                                                                                        <TBODY class=dates id=dayList1 onclick="getDate1(event)" vAlign=center>
                                                                                            
                                                                                            <SCRIPT TYPE="text/javascript" language=JavaScript>
                                                                                            for (var intWeeks = 0; intWeeks < 6; intWeeks++)
                                                                                            {
                                                                                                document.write("<TR>");
                                                                                                for (var intDays = 0; intDays < days.length; intDays++)
                                                                                                    document.write("<TD></TD>");
                                                                                                document.write("</TR>");
                                                                                            }
                                                                                            </SCRIPT>

</TBODY>
                                                                                        <TBODY>
                                                                                            <TR>
                                                                                                <TD class=today colSpan=5 id=todayday1 onclick=getTodayDay1()></TD>
                                                                                                <TD align=right colSpan=2><A href="javascript:HideCalendar1();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
                                                                                            </TR>
                                                                                        </TBODY>
                                                                                </TABLE></td>
                                                                            </tr>
                                                                      </div>
    <body  style="min-height: 570px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;">

<form name="Branch" action="addFacility_Booking.jsp" method="post">
        <div id="welcome">
           <div id="welcome_in">
            <div id="welcome_in_left">Facility Booking</div>
            <div id="welcome_in_right">
                <%
                Date dt=new Date();
                String login_user = (String)session.getAttribute("user");
                SimpleDateFormat sd=new SimpleDateFormat("dd-MM-yyyy");
                String sys_dt=sd.format(dt);
                %>
            <div id="welcome_in_right_right">Welcome: <%=login_user%></div>
            <div id="welcome_in_right_left"><img src="images/afterlogintop_icon.jpg" width="42" height="30"></div>
            </div>
         </div>
        </div>
            <div id="container1" style="overflow:Auto;height:200px;width:950px;">
        <div style="height:3px; "></div>
        <%
        JdbcConnection conn=new JdbcConnection();
        Connection con=null;
        ResultSet rs=null;
        Statement stmt=null;
        boolean bn=false;
        String qry,sql;
        String qrt;
        String socs=null;
        con=conn.getConnection();
        stmt=(Statement)con.createStatement();
      qrt="select society from login where username='"+login_user+"'";
      rs=stmt.executeQuery(qrt);
      if(rs.next()==false){}
      else{rs=stmt.executeQuery(qrt);
      while (rs.next())
     {
          socs=rs.getString(1);
      }
         %>
                <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" rules="rows" style="border:1px solid #cccccc;">
                    <tr>
                           <td class="centerfont" width="150">Society</td>
                           <td colspan="2" class="centerfont">
                               <select name="society_name" id="socs">
                                     <option value="<%=socs%>"><%=socs%></option>
                                 <%}
                                 %>
                             </select></td>
                         </tr>
                       <tr>
                           <td class="centerfont" width="240">Select Facility for Booking</td>
                           <td colspan="2" class="centerfont">
                               <select name="facility_name" id="fac">
                                   <option value="">Select Facility</option>
                                   <%
                                   con=conn.getConnection();
                                   stmt=(Statement)con.createStatement();
                                   qry="select facility_type from facility_types";
                                   rs=stmt.executeQuery(qry);
                                  //System.out.println("Query is... "+qry);
                                   if(rs.next()==false){}
                                   else{rs=stmt.executeQuery(qry);
                                   while(rs.next())
                                       {
                                       bn=true;
                                   %>
                                   <option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>
                                   <%}} %>
                               </select>
                           </td>
                        </tr>
                        <tr>
                           <td class="centerfont" width="240">Resident Name</td>
                           <td class="centerfont"><input type="text" name="resi_name" id="res" value="" onkeyup="return Get_ResidentNameMeter_no('box12','res',1);"></td>
                           <td><input type="hidden" name="resi_name" id="content" value=""></td>
                        </tr>
                        <tr style="display: none;" id="tr1">
                            <td class="centerfont"><div id="box12" class="centerfont" align="left" style="display: none;"></div></td>
                            <td colspan="2"> </td>
                        </tr>
                        <tr>
                           <td class="centerfont" width="240">Flat No</td>
                           <td colspan="2" class="centerfont"><input type="text" name="flat_no" id="flat"></td>
                        </tr>
                        <tr>
                           <td class="centerfont" width="240">Contact No</td>
                           <td colspan="2" class="centerfont"><input type="text" name="contact_no" id="ctn"></td>
                        </tr>
                        <tr>
                           <td class="centerfont" width="240">Description</td>
                           <td colspan="2" class="centerfont"><textarea style="float: left;" name="booking_desc" rows="3" cols="38" id="desc"></textarea></td>
                        </tr>
         
                          <tr>
                           <td class="centerfont" width="240">Date
                               <label style="float: right;">From</label>
                           </td>
                           <td colspan="2">
                               <table align="center" width="100%" border="0" >
                                   <tr>
                                       <td class="centerfont"><input type="text" name="booking_date_from" size="15"  value="<%=sys_dt%>" id="from"><span><a href="JavaScript:;" onClick="toggleCalendar('from')"><img src="images/calendar.png" border="0"></a></span></td>
                                       <td class="centerfont">To</td>
                                       <td class="centerfont"><input type="text" name="booking_date_to" size="15" value="<%=sys_dt%>" id="to"><span><a href="JavaScript:;" onClick="toggleCalendar('to')"><img src="images/calendar.png" border="0"></a></span></td>
                                   </tr>
                               </table>
                           </td>
                        </tr>
                        <tr>
                           <td class="centerfont" width="240">Time
                           <label style="float: right;"></label>
                           </td>
                           <td colspan="2" class="centerfont">
                               <input type="text" name="booking_time_from" size="7">AM
                               
                               <input type="text" name="booking_time_to" size="7">PM
                        </tr>
                         <tr>
                             <td> </td>
                            <td height="30"><input type="submit" name="button" class="button" value="Submit"></td>
                            <td colspan="1"></td>
                        </tr>
                </table>
            </div>
    <jsp:include page="footer.jsp"/>
            </form>
          </body>
        </html>

I set date from to with calender but I dont want to enter time in the time's textbox from and to with mannual so please suggest me .......... and i want this time format in the table as i select date from and to and it sets in the table so i want to add time from and to also in the table....

Thanks in advanced!!!

Rd Dari

Ranch Hand

Posts: 214

I like...

posted 7 years ago

Please suggest me for my first post what i can use for the timesetter......according to am and pm for the booking any facility like resturant,garden etc.

I made a calendar and use it for date and only select date from the calender so i wanna like this for the time... so please suggest me...

Thanks once again....

It is sorta covered in the JavaRanch Style Guide.

How to set timer for select the time am to pm on front end in a jsp page like calender for date?

Similar Threads