[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Time picker only(in military time)

Posted on 2003-11-13
24
Medium Priority
?
4,110 Views
Last Modified: 2008-01-09
Is there a time picker in JavaScript, or vbscript on any site that I can use with my asp page? I need just the time picker in Military if possible. No date picker please( I already got the code for that). Thanks.
0
Comment
Question by:nguyen_85
  • 11
  • 10
  • 3
24 Comments
 
LVL 10

Expert Comment

by:Nushi
ID: 9742217
use tigra date picker.
its the best:

free script
http://www.softcomplex.com/products/tigra_calendar/demo1.html

Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9742628
I already have the date picker(tigra_calendar) from them but I need just the time picker so my client can select the time in military. I guess I can create drop down menu but it doesn't look as nice as a time picker.
0
 
LVL 2

Expert Comment

by:Codescripter
ID: 9742794
Hmmm...  What exactly did you want the time picker to display... a list of possible hours?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 10

Expert Comment

by:Nushi
ID: 9742967
what is a military time:

10:00:00 10:00:00?
10:23:23.23?
23:15:23.234?

can you please show the time?
so i can make it for you in tigra
Nushi.

0
 

Author Comment

by:nguyen_85
ID: 9742986
Yes a list of possible hours and minutes in military format. Doesn't have to be every single minutes but an increment of 5, 10, or even 15 minutes is fine. Thanks
0
 

Author Comment

by:nguyen_85
ID: 9743002
Yes Nushi. Here iare some example
12:15
08:25
22:45
or something similar. Thanks!
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9743037
why not using textfield and validation?
is it good for you ? if it is i will write you code for that.

Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9743099
My client is lazy. They just want to select the time from the time picker and populate in textField. No validation is neccesary.
0
 
LVL 2

Expert Comment

by:Codescripter
ID: 9743111
I guess it is possible to display all possible numbers, but you might want to go with Nushi's idea, for ease of use for the end user.
0
 
LVL 2

Expert Comment

by:Codescripter
ID: 9743123
> My client is lazy. They just want to select the time from the time picker and populate in textField. No validation is neccesary.

In that case, up the points... make it worth Nushi's time!  =)
0
 

Author Comment

by:nguyen_85
ID: 9743132
Is 150 ok!
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9743196
Codescripter Thank your :-)))

so which way you choose.

this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<style>
#message{
      font-size:10px;
      color:red;
      display:none;
      }
</style>
<body>
<script>
var timePattern = /^(([0-1][0-9])|([2][0-4])):([0-5][0-9])$/
function checkTime( time ){
    if (time.match(timePattern)==null)
            document.getElementById('message').style.display = 'block';
      else
            document.getElementById('message').style.display = 'none';
      
      }
</script>
<table>
      <tr>
            <td>Time (format 24H:mm)&nbsp;&nbsp;</td>
            <td><input type="text" onkeyup="checkTime( this.value )"></td>
      </tr>
      <tr>
            <td>&nbsp;</td>
            <td><span id='message'>Wrong format use HH:MM</div></td>
      </tr>
</table>

</body>
</html>


or maybe tigra fix?
just let me know and it will be done.
:-))
Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9743255
format is fine! just make sure it's a time picker(a pop up window so user can select time just like the date picker). thanks!
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9743266
or this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<script>
function addHours( selectId ){
      var selectObj = document.getElementById(selectId);
      var hour;
      for (ind=0; ind<24; ind++){
            hour = (ind<10) ? '0' + ind : ind ;
            selectObj.options[ind] = new Option( hour , hour);
            }
      
      }

function addMinutes( selectId ){
      var selectObj = document.getElementById(selectId);
      var minutes;
      for (ind=0; ind<60; ind++){
            minutes = ind<10 ? '0' + ind : ind ;
            selectObj.options[ind] = new Option( minutes , minutes);
            }
      
      }
</script>
Time: <select id='hours'></select><select id='minutes'></select>
<script>
addHours('hours');
addMinutes('minutes');
</script>


</body>
</html>


but i can see that teh formatted is good enough for you.
i will make it in a pop up for you in few minutes.
do you need to return teh date to the parent?

Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9743308
the first option is fine. I don't need the return date.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9743411
hi again.

This is page 1 (you can change the button to whatever you want)

-- Page1.html
<html>
<head>
      <title>Untitled</title>
</head>

<body>
<input type='button' value='Time' onclick='pickTime()'>

<script>
function pickTime(){
      window.open('cal.html','cal','toolbars=no,height=70,width=350');
      }
</script>


</body>
</html>

-- cal.html
<html>
<head>
    <title>Untitled</title>
</head>

<style>
#message{
    font-size:10px;
    color:red;
    display:none;
    }
</style>
<body>
<script>
var timePattern = /^(([0-1][0-9])|([2][0-4])):([0-5][0-9])$/
function checkTime( time ){
   if (time.match(timePattern)==null)
         document.getElementById('message').style.display = 'block';
    else
         document.getElementById('message').style.display = 'none';
   
     }
      
function updateTime      (){
      // add your code to do
      // whatever you need to do with the timer.
      window.close();
      
}
</script>
<table>
    <tr>
         <td><b>Time</b><i> (format 24H:mm)</i>&nbsp;&nbsp;</td>
         <td><input type="text" onkeyup="checkTime( this.value )"></td>
    </tr>
    <tr>
         <td>&nbsp;</td>
         <td><span id='message'>Wrong format use HH:MM</div></td>
    </tr>
</table>
<input type='button' onclick="updateTime()" value='Upadte Time'>
</body>
</html>

Please ask anything else if you have more questions.


Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9743527
Are you going to send the code for the cal.html ? Because when i click the time button a blank window just appered! If you are still working on it just ignored my question?
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9743552
its in there:

look in the section:
-- cal.html

both pages are in the prevoius comment.
again look for: -- cal.html in the prevoius comment.

:-))
Nushi.


0
 

Author Comment

by:nguyen_85
ID: 9743645
I must be blind!
It's almost what i wanted but not quite.
The user should not have to type anything.
They just use the mouse to click on a available time( like a pop up calendar except the window wil show time instead of date) and the time they pick will appear in a textField. I will up the Points to 200 if you can do this. Thanks for you time.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9744741
i am leaving the office for the weekend.
i am able to do what you want but it will be only on sunday.

Nushi.
0
 

Author Comment

by:nguyen_85
ID: 9749245
Thanks Nushi, I appreciated. I'll check back Sunday.
0
 
LVL 10

Accepted Solution

by:
Nushi earned 800 total points
ID: 9762944
Hi there.

this is the new Cal.html.
replace this with the old one and let me know if you want to change or fix anything else.
i will answer all your request until you will be statisfied.

you said you want it only for 5 minutes difffrence,
take a look at this in the code.

//      This will be the gap for the minutes.
//      set this to any value you wish
//      for example:
//          10 will generate 0,10,20,30...
//          5  will generate 0,5,10,15,20,25,30...
var minutesStep = 1;


Nushi.

<html>
<body onload='init()'>
      <table>
            <tr>
                  <td>
                        <select id='hours' name='hours' onchange="setTimeStamp()"></select>
                  </td>
                  <td>
                        <select id='minutes' name='minutes' onchange="setTimeStamp()"></select>
                  </td>
            </tr>
      </table>
      <input type='button' onClick="alert('Place your code here fro sending the date')" value='Upadte Time'>
<br><br><br>
This is the output:
<br>
      <input type='text' value='00:00' id='timeStamp' readonly>
</body>
<script>
//      This will be the gap for the minutes.
//      set this to any value you wish
//      for example:
//                  10 will generate 0,10,20,30...
//                  5  will generate 0,5,10,15,20,25,30...
var minutesStep = 1;

//      The time objects
var minutesObj = document.getElementById( 'minutes' );      
var hoursObj = document.getElementById( 'hours' );      

function init(){
      var minute =0;
      var value;
      while( minute<60){
            value =  minute<10 ? '0' + minute : minute;
            minutesObj.options[ minutesObj.options.length ] = new Option( value, value);
            minute+= minutesStep;
            }

      for (ind=0; ind<24; ind++){
            value =  ind<10 ? '0' + ind : ind;
            hoursObj.options[ hoursObj.options.length ] = new Option( value, value);
            }
      }

function setTimeStamp(){
      document.getElementById( 'timeStamp').value = hoursObj.value +':'+ minutesObj.value;      
      }      

</script>
</html>
0
 

Author Comment

by:nguyen_85
ID: 9766742
Great Job and Thanks. That's all I needed. I Upgrade your points to 200. If you did not get the upgrade please let me know.
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9769773
Np nguyen_85
Thank you .

Please let me know if you need anything else related to this question.
i will answer all your questions if you still have any.

Nushi.


0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question