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....

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

Similar Threads