Solved

Time picker only(in military time)

Posted on 2003-11-13
24
4,004 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now