Time picker only(in military time)

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.
nguyen_85Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NushiCommented:
use tigra date picker.
its the best:

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

Nushi.
0
nguyen_85Author Commented:
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
CodescripterCommented:
Hmmm...  What exactly did you want the time picker to display... a list of possible hours?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

NushiCommented:
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
nguyen_85Author Commented:
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
nguyen_85Author Commented:
Yes Nushi. Here iare some example
12:15
08:25
22:45
or something similar. Thanks!
0
NushiCommented:
why not using textfield and validation?
is it good for you ? if it is i will write you code for that.

Nushi.
0
nguyen_85Author Commented:
My client is lazy. They just want to select the time from the time picker and populate in textField. No validation is neccesary.
0
CodescripterCommented:
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
CodescripterCommented:
> 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
nguyen_85Author Commented:
Is 150 ok!
0
NushiCommented:
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
nguyen_85Author Commented:
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
NushiCommented:
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
nguyen_85Author Commented:
the first option is fine. I don't need the return date.
0
NushiCommented:
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
nguyen_85Author Commented:
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
NushiCommented:
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
nguyen_85Author Commented:
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
NushiCommented:
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
nguyen_85Author Commented:
Thanks Nushi, I appreciated. I'll check back Sunday.
0
NushiCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nguyen_85Author Commented:
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
NushiCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.