Thursday 28 August 2014

HTML Time Picker

Dowload files link : http://curioussolutions.github.io/DateTimePicker/



HTML TimePicker Example Snippet:

<!DOCTYPE html>

<html>

   
<head>
   

<title>Time Picker</title>

<link rel="stylesheet" type="text/css" href="../src/DateTimePicker.css" />
   


<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
   
<script type="text/javascript" src="../src/DateTimePicker.js"></script>
   

<!--[if lt IE 9]>
           
<link rel="stylesheet" type="text/css" href="../src/DateTimePicker-ltie9.css" />

<script type="text/javascript" src="../src/DateTimePicker-ltie9.js"></script>

<![endif]-->
       


<style type="text/css">

p{
margin-left: 20px;

}


input{
width: 200px;

padding: 10px;

margin-left: 20px;
   
margin-bottom: 20px;

}

</style>
       

</head>
   

<body>
   

<p>Time : </p>
<input type="text" data-field="time" readonly>
   
<div id="timeBox"></div>
   
<input type="text" data-field="date" readonly>

<div id="dateBox"></div>

<script type="text/javascript">
   
$(document).ready(function()
   
{
$("#timeBox").DateTimePicker();
   
$("#dateBox").DateTimePicker();
    });

</script>
   

</body>

s
</html>

No comments:

Post a Comment