Picktim
Basic JQuery timepicker plugin
Dependencies
- JQuery (>=2.2.4)
- Font-Awesome (^4.7)
Installation
Download the latest release from GitHub at https://github.com/engel-ja/picktim.
Usage
Attach the timepicker plugin to your desired document element, eg.
HTML
<head>
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="assets/css/picktim/picktim.css">
</head>
<body>
...
<div class="timepicker" id="timepicker"></div>
...
<script type="text/javascript" src="assets/js/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="assets/js/picktim/picktim.js"></script>
</body>
Javascript
$(".timepicker").picktim();
Options
$(".timepicker").picktim({
backgroundColor: "#EEE",
borderColor: "#DDD",
textColor: "#333",
symbolColor: "#333",
appendTo: 'body',
mode: "h24", // can be h12 for 12 hour format or h24 for 24 hour format
orientation: "bottomLeft", // camel-case combination of (top/bottom and Left/Right) or (left/right and Top/Bottom)
defaultValue: '00:00', // can be set as 'now' to default to current time
formName: '', // specifies wether the plugin will be used as part of a form and assigns a name (leave empty for a non-form element)
icons: {
up: 'fa fa-chevron-up fa-fw',
down: 'fa fa-chevron-down fa-fw',
clear: 'fa fa-times fa-fw'
}
});
Useful Method(s)
$(".timepicker").picktim('value'); // returns the value of the input element in the plugin
Copyright
Copyright (c) 2018 Adriaan Engelbrecht Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent