jquery-timepicker

<!DOCTYPE html> <html class="no-js"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,400italic&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>  </head> <body> <div class="wrapper"> <header class="header"> <div class="logo"><a href=""><img src="img/logo.png" alt="" class="logo__img"></a></div>  <nav class="header__menu"> <ul class="top-menu clearfix"> <li class="top-menu__item"><a href="" class="link link_type-wrapper link_top-menu"><img src="img/ico-user.png" alt="" class="ico"><span class="link__inner-span">john@smith.com</span></a> <ul class="top-menu__sub"> <li class="top-menu__sub-item"> <a href="" class="top-menu__sub-item-link">Title title</a> </li> <li class="top-menu__sub-item"> <a href="" class="top-menu__sub-item-link">Title title</a> </li> <li class="top-menu__sub-item"> <a href="" class="top-menu__sub-item-link">Title title</a> </li> </ul> </li> <li class="top-menu__item"><a href="" class="link link_type-wrapper link_top-menu">Days left: <b class="days">29</b></a></li> <li class="top-menu__item"><a href="" class="link link_type-wrapper link_top-menu"><span class="link__inner-span">Logout</span><img src="img/ico-logout.png" alt="" class="ico ico_right"></a></li> </ul> </nav> </header> <aside class="left-sidebar"> <nav class="left-menu"> <a href="" class="left-menu__link"> <i class="left-menu__ico left-menu__ico_camera-list"></i> <span class="link__inner-span">Camera list</span> </a> <a href="" class="left-menu__link"> <i class="left-menu__ico left-menu__ico_map-pins"></i> <span class="link__inner-span">Map Pins</span> </a> <a href="" class="left-menu__link left-menu__link_current"> <i class="left-menu__ico left-menu__ico_calendar"></i> <span class="link__inner-span">Calendar</span> </a> </nav> </aside> <div class="content"> <div class="middle"> <div class="container"> <div class="container__inner"> <div class="calendar-list"> <div class="calendar-list__item"> <div class="calendar-list__img"> <a href="" class="calendar-list__link"><img src="uploads/calendar-1.jpg" alt=""></a> <a href="" class="btn btn_calendar-list"><span class="link__inner-span">Download</span><i class="link__ico"></i></a> </div> <div class="calendar-list__info"> <div class="calendar-list__time">16:46:00 (4 min)</div> <div class="calendar-list__alarm">Alarms: 24</div> </div> </div> <div class="calendar-list__item"> <div class="calendar-list__img"> <a href="" class="calendar-list__link"><img src="uploads/calendar-2.jpg" alt=""></a> <a href="" class="btn btn_calendar-list"><span class="link__inner-span">Download</span><i class="link__ico"></i></a> </div> <div class="calendar-list__info"> <div class="calendar-list__time">13:25:00 (10 min)</div> <div class="calendar-list__alarm">Alarms: 18</div> </div> </div> <div class="calendar-list__item"> <div class="calendar-list__img"> <a href="" class="calendar-list__link"><img src="uploads/calendar-3.jpg" alt=""></a> <a href="" class="btn btn_calendar-list"><span class="link__inner-span">Download</span><i class="link__ico"></i></a> </div> <div class="calendar-list__info"> <div class="calendar-list__time">14:22:15 (24 min)</div> <div class="calendar-list__alarm">Alarms: 10</div> </div> </div>  </div> <div class="pagination"> <div class="pagination__control clearfix"> <a href="" class="link link_pagination link_prev"><i class="link__ico"></i><span class="link__inner-span">Previous 9 position </span></a><a href="" class="link link_pagination link_next"><span class="link__inner-span">Next 9 position </span><i class="link__ico"></i></a> </div> <ul class="clearfix"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li class="pagination__current"><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">7</a></li> </ul> </div> </div> </div> <aside class="right-sidebar">  <div class="archive archive_border"> <div class="archive__title">Select camera:</div> <form action=""> <select name="" id="" class="select"> <option value="">All cameras</option> <option value="">Сamera №23</option> <option value="">Сamera office work №21</option> <option value="">Сamera home №1</option> </select> <div class="period clearfix"> <ul class="radio-list"> <li class="radio-list__item"><span class="radio-list__input-wrap"><input type="radio" name="period" id="" value="1" class="radio-list__input">Today</span></li> <li class="radio-list__item"><span class="radio-list__input-wrap"><input type="radio" name="period" id="" value="2" class="radio-list__input">Week</span></li> <li class="radio-list__item"><span class="radio-list__input-wrap"><input type="radio" name="period" id="" value="3" class="radio-list__input">Month</span></li> </ul> <div class="archive__title">Period:</div> </div> <div class="archive__row"> <input type="text" class="datepicker"><span class="archive__separator">–</span><input type="text" class="datepicker"> </div> <div class="archive__row"> <input type="text" class="timepicker"><span class="archive__separator">–</span><input type="text" class="timepicker"> </div> </form> </div> <div class="archive"> <div class="archive__row"> <div class="archive__data">Videos: <b>18</b></div><div class="archive__data">Alarms: <b>258</b></div> </div> <a href="" class="btn btn_big btn_download btn_center"><span class="link__inner-span">Get Archive</span><i class="link__ico"></i></a> </div> </aside> </div> </div> </div>   <script src="js/vendor/jquery-1.10.1.min.js"></script> <script src="js/vendor/jquery-ui-1.10.4.custom.min.js"></script> <link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.4.custom.css"> <script src="js/hoverIntent.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.formstyler.min.js"></script> <link rel="stylesheet" href="css/jquery.formstyler.css"> <script src="../../../jquery.timepicker.js"></script> <link rel="stylesheet" href="../../../jquery.timepicker.css"> <script src="js/main.js"></script> <script> jQuery(document).ready(function(){ $( '#datepicker, .datepicker' ).datepicker({dateFormat: 'dd.mm.y'}); $('.select').styler(); $('input.timepicker').timepicker({ timeFormat: 'HH:00' }); $('.radio-list__input-wrap').mousedown(function(){ changeCheck($(this)); }); $('.radio-list__input-wrap').each(function(){ changeCheckStart($(this)); }); function changeCheck(el){ var el=el, input=el.find('input').eq(0); if(!input.attr('checked')){ $('.radio-list__input-wrap').each(function(){ cInput = $(this).find('input').eq(0); if(cInput.attr('name') == input.attr('name')){ $(this).removeClass('radio-list__item_active'); cInput.attr("checked", false); } }); el.addClass('radio-list__item_active'); input.attr("checked", true); } return true; } function changeCheckStart(el){ var el=el,input=el.find('input').eq(0); if(input.attr('checked')){ el.addClass('active'); } return true; } }); </script>   </body> </html>