Tuesday, May 1, 2012

DatePicker and timepicker using anytine JavaScript library



Anytime time picker Javascript  library  allows your visitors to easily input a date/time into a form field, by selecting it from a popup window.

First you need to download anytime.css, anytime.js and  jquery.js from:
http://www.ama3.com/anytime/
For example, I put it in my website:
http://jiansenlu.comze.com/anytime/

Additional I also used calendar.png and clock.png at the end of date and time input boxes.

My code using Anytime date picker and time picker as below:
<link href="http://jiansenlu.comze.com/anytime/anytime.css" rel="stylesheet" type="text/css"></link>
<script src="http://jiansenlu.comze.com/anytime/jquery.js">
</script>
<script src="http://jiansenlu.comze.com/anytime/anytime.js">
</script>
<style>
        #field2 { background-image:url("http://jiansenlu.comze.com/anytime/clock.png");
          background-position:right center; background-repeat:no-repeat;
          border:1px solid #FFC030;color:#3090C0;font-weight:bold}
        #AnyTime--field2 {background-color:#EFEFEF;border:1px solid #CCC}
        #AnyTime--field2 * {font-weight:bold}
        #AnyTime--field2 .AnyTime-btn {background-color:#F9F9FC;
          border:1px solid #CCC;color:#3090C0}
        #AnyTime--field2 .AnyTime-cur-btn {background-color:#FCF9F6;
            border:1px solid #FFC030;color:#FFC030}
        #AnyTime--field2 .AnyTime-focus-btn {border-style:dotted}
        #AnyTime--field2 .AnyTime-lbl {color:black}
        #AnyTime--field2 .AnyTime-hdr {background-color:#FFC030;color:white}
     
</style>
<br />
<form action="/anytime/" method="GET">
Date:<input id="field1" size="50" style="background-image: url('http://jiansenlu.comze.com/anytime/calendar.png'); background-position: right center; background-repeat: no-repeat;" type="text" value="enter your date" /><br />
Time: <input id="field2" type="text" value="12:00" />
</form>
<script>
  AnyTime.picker( "field1",
    { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
$("#field2").AnyTime_picker(
    { format: "%H:%i", labelTitle: "Hour",
      labelHour: "Hour", labelMinute: "Minute" } );
</script>


Result:

Date:
Time:

No comments:

Post a Comment