I'm trying to implement a time picker, in a text box. But the times are flowing outside of the box.
Does anyone know what the issue could be?
Inside my HTML file:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>
<script>
$(function() { $('#time_picker').timepicker({ 'step': 15 }); });
</script>
...
<label> Departure Time: </label>
<input type="text" id="time_picker" name="depart_time"> <br>
This will work fine
<link href="jquery-ui.css" rel="stylesheet" />
<link href="jquery.timepicker.css" rel="stylesheet" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#time_picker').timepicker();
});
</script>
Related
This question already has answers here:
Loading Jquery UI before Jquery
(3 answers)
Closed 5 years ago.
I use jQuery UI in my project. The version of jquery-ui.min.css and jquery-ui.min.js are both v1.12. So I choose the latest version of jQuery jquery-3.2.1.min.js.
And I choose datepicker() to test. But it worked fail. When i cilick the input text, there is nothing appear.Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQueryUI</title>
<link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
<script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script>
$(function(){
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div>
<input type="text" name="date" id="datepicker" />
</div>
</body>
</html>
And I had tried jQuery.min.js of 1.9 version, but it also worked fail. I don't know where is wrong? Who can help me ?
You have to load jQuery before jQuery-ui.
Try in this order.
<link rel="stylesheet" type="text/css" href="jsui/jquery-ui.min.css">
<script type="text/javascript" src="jsui/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jsui/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
In the below snippet, I used CDNs.
$(function(){
$("#datepicker" ).datepicker();
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<div>
<input type="text" name="date" id="datepicker" />
</div>
I have been struggling with this error for a while now. Checked all my includes, compared to other pages and everything looks to be fine to me. I am honestly completely lost why this is happening.
I have a jQuery datepicker function on my homepage which doesn't work, it throws the error "Function not found". However, I have the exact same function on other sub-pages and no issues at all.
css
Those are my includes from the page that works:
<link rel="stylesheet" href="./index/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./index/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
Scripts
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
And to compare, includes from the homepage
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
I also thought that maybe I wrote something wrong so I copied the code exactly from the working page and still no luck. The only difference is that I am using Google Charts API on the homepage, could this be throwing off the datepicker?
My datepicker function:
JavaScript
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
And where it is used:
HTML
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" />
I dont know in which order you load the scripts, so here is the ay it worked for me:
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
$( function() {
$( "#datepicker" ).datepicker();
} );
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" >
i am using the following code for datetimepicker but i am unable to understand why it is not working. I mean in the input box nothing is shown. Please help me ?
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/i18n/jquery-ui-timepicker-addon-i18n.js"></script>
<script>
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>
</head>
<body>
<form>
<input id="datepicker" />
</form>
</body>
</html>
You must add the following too:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
^ Here is the plugin js & css.
And here you will find all the scripts/css files that you need: http://cdnjs.com/libraries/jquery-ui-timepicker-addon
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>
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
});