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>
<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:
No comments:
Post a Comment