I have created a web page with a JavaScript datetimepicker but it is not working due to another jQuery version being called to the page for another purpose. How would I make datetimepicker or datepicker work with any version of JavaScript?
$(function() {
$("#datepicker").datepicker();
});
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="style/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="style/qweerwer.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
var jQuery_3_1_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
var jQuery_1_11_1 = $.noConflict(true);
</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<label class="control-label"> Event Date </label>
<div class="form-group ">
<input style='max-width: 250px;' readonly="" name="eventdate" placeholder="Event Date" id="datepicker" class="form-control">
</div>
You are missing reference to jQuery UI library, where datepicker function is defined. Add this line to your HTML.
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Use the following js library and css:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Related
I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.
This is displayed:
The HTML and js is:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="resources/jquery/jquery.js"></script>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/jquery/jquery.validate.js"></script>
<script src="resources/jquery/jquery.validate.min.js"></script>
<script src="resources/jquery/additional-methods.js"></script>
<script src="resources/jquery/additional-methods.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="resources/jquery/moment-with-locales.js"></script>
<!-- Le styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
I know it is frowned upon to have the script with the HTML and will separate when working.
Try to swap the order of loading datetimepicker and moment.js, so that moment.js is loaded first
<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
Edit
As your code examples has some local resources which we can not check, here is a simple working example with external resources only:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>
You maybe want to try to adapt that. If it doesn't work inside your code, try to check for errors on the console. Another try would be to implement my code, comment out all of your initial includes and un-comment them step by step to find the source of evil.
Checked your code and it seems like you have not included the moment.js file first before jquery library and bootstrap js file. Also you have not included the moment.js file in your code. Please try as mentioned below
Ex :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Another thing I noticed is, you didn't provided an id to the input field. Try to provide an id to input field and use in jquery
Ex :
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Now in script
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Its worked for me and hope it works for you.
I try to use a datepicker, but it doesn't work.
I have this error : $(...).datepicker is not a function
I use many frameworks and librairy (Adminlte, bootstrap, chartjs, datatable). And I think that there is a conflicts between they.
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datepicker').datepicker('getFormattedDate')
);
});
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="./css/skin-black-light.css">
<!-- CSS Table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- My Style -->
<link rel="stylesheet" href="./css/style_general.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" />
<link rel="stylesheet/less" type="text/css" href="./less/sprites.less" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="form-group">
<label>Date</label>
<div class="input-group date margin-bottom-10" id="datetimepicker1">
<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="./js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/app.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="./js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./js/demo.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="./js/jquery.slimscroll.min.js"></script>
<!-- JS table -->
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="./js/test_table.js"></script>
<script src="./js/js.js"></script>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j( function() {
j( "#datepicker" ).datepicker();
} );
</script>
Please try it this way. It is working fine. Same object is defined and used by jquery so its conflict try above trick its work fine..
I think datepicker is available in JQuery UI but you didn't include those library files. when I include the below files there is no such error $(...).datepicker
please include these file and check
[link] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[link] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
Make sure that you include that datapicker.js library on the page that you use it on. Make sure that the link / local file exists. It may be a loaded from a different file if you are using bootstrap / framework.
This is the most common reason.
You can follow like this. This works for me.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
The JS coding for the Date Picker I use.
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy',
container: container,
changeYear: true,
changeMonth: true,
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100"
};
date_input.datepicker(options);
});
</script>
The HTML Coding:
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
If datepicker does not work due to conflict jquery, then try this way. It will work.
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
(function($){"use strict";
var $window=$(window)
var datepick=$('.date-pick')
if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}
})(jQuery);
});
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <!-- datepicker js-->
There is no conflict with using jQuery and Datepicker together.
This error - "$().datepicker is not a function" - is almost always a conflict because of a second instance of jQuery being loaded.
Look for a second instance of jQuery being loaded somewhere.
I have gone through all your js files.
Noted that you are using AdminLTe for your js and css.
In that case, check again the the example in Forms > Advanced Elements in left panel.
I think you missed out the bootstrap datepicker: Try searching for this js file in AdminLTe Example: <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
Inclue JqueryUI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I'm fairly new to Angular.js (or to web programming in general). I got a pretty basic problem - I'd like to include a date picker in my application. For this purpose, I try to set up the bootstrap datepicker:
https://bootstrap-datepicker.readthedocs.org/en/latest/#
I have the jQuery and Bootstrap dependencies included:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/blog.css">
<script src="angular-datepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>
I don't really understand, how am I supposed to use it from now on? I can include some input field in my HTML template, but how exactly do I call the script that calls the date picker widget?
Add an id or a class to your input field and use that as a selector once you call the datepicker.
In your HTML:
<input type="text" class="datepicker">
In your JS:
$('.datepicker').datepicker();
full code just test
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({pickTime: false});
});
</script>
</body>
</html>
Okay, I'm working on a new personal project and I'm a beginner in Bootstrap.
What I'm trying to do for two days is; inserting dateTimePicker and number Incrementer using bootstrap techniques. And for doing this I searched a lot and tried many different tutorials, examples and none of those worked for me. I think that the problem should be the way of referencing the jquery libraries, javascripts and CSS. This is for the fact that I was trying to insert some glyphicons and they wouldn't appear to. So I'm asking how to correctly insert, arrange this libraries.
Here is what I have until now:
1) On my Site.Master in ASP.NET WebForms I have this references in the head Section:
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
<link href="Content/datepicker.css" rel="stylesheet" />
<link href="Content/prettify.css" rel="stylesheet" />
<!--
<link href="Content/slider.css" rel="stylesheet" />
<link href="Content/iThing.css" rel="stylesheet" />
-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<!--
<link href="https://a0.muscache.com/airbnb/static/packages/common_o2.1-024e8f08a0bba6da7891dd4b6c39b7aa.css" media="all" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/p1/main-pretzel-f7ebfdaf120892e36656cf39bcc3addf.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://a0.muscache.com/airbnb/static/packages/autocomplete-dd80b94ccaa2e37d6c20412621a9aeac.css" media="screen" rel="stylesheet" type="text/css" />
-->
<!--
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-slider.js"></script>
-->
2) In my Default.aspx page, where I'm trying to insert the datetimePicker and the other things and this page is a WebForm with Master I have this part for DateTimePicker in this occasion:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
3) The Result that I'm getting is the following:
doesn't work and doesn't show the calendar icon to
At the end of Default.aspx i have also included this scripts:
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>
Somebody knows where I'm doing something wrong?
This guide created by Twinkle can help you set up your files properly: Bootstrap 3.0 with ASP.NET
As for a datepicker, I have used http://www.eyecon.ro/bootstrap-datepicker/
Here's a jsFiddle
HTML
<div class="well">
<input type="text" class="span2" value="02-16-2012" id="targetID" >
</div>
JS
$('#targetID').datepicker({
format: 'mm-dd-yyyy'
});
I downloaded the timepicker from here. After cutting a lot of code I came to this simple example:
<html>
<head>
<title>jQuery.timepickr.js</title>
<link rel="Stylesheet" media="screen" href="reset.css" />
<link rel="Stylesheet" media="screen" href="styles.css" />
<link rel="Stylesheet" media="screen" href="../dist/themes/default/ui.core.css" />
<link rel="Stylesheet" media="screen" href="../src/css/ui.timepickr.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>
<script type="text/javascript" src="jquery.utils.js"></script>
<script type="text/javascript" src="jquery.strings.js"></script>
<script type="text/javascript" src="jquery.anchorHandler.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript" src="../src/ui.timepickr.js"></script>
<script type="text/javascript">
$(function(){
$('#timepicker').timepickr().focus();
$('#timepicker').next().find('ol').show().find('li:eq(2)').mouseover();
});
</script>
</head>
<body id="themeroller">
<div id="splash">
<div id="demo">
<div id="d-demo-wrapper-1" class="demo-wrapper">
<input id="timepicker" type="text" value="02:30" class="demo">
</div>
</div>
</div>
</body>
</html>
I noticed that when I try to manually set the time from the keyboard the numbers are changed automatically then the mouse is out of the input field. I noticed that even into the original example I cannot set the numbers manually. How I can solve this problem?
You can set the default value, by using val attribute in timepickr
$("#timepickr").timepickr({
convention: 12,
format12: "{h:02.d}:{m:02.d} {z:s}",
rangeMin: $.range(0, 60),
val: "02:00 am" //set your default time here
});