How to use the bootstrap datepicker? - javascript

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>

Related

Jquery UI can not work with 1.12version [duplicate]

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>

Semantic ui modal error

I have already tried but could not find any answer to my question.
I want to use a semantic modal,the first, this!
my imports are:
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.min.css">
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"> </script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"> </script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="moduli/jquery-ui/jquery-ui.js"></script>
<script src="moduli/semantic/dist/components/modal.min.js"></script>
Error on console :
modal.min.js:11 Uncaught TypeError: O.transition is not a function
modal.min.js:11 Uncaught TypeError: q.dimmer is not a function
when I click on a button, I call the follow js function:
$('.ui.modal')
.modal({onShow: function(){}})
.modal('show');
I think that your error simply comes from the order of your <script> imports, since semantic.min.js depends on jQuery you must include jQuery before semantic.min.js
So use:
...
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
...
Instead of:
...
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
...
You can see the working sample there:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<input type="button" value="showModal" onClick="$('.ui.modal').modal('show');"></input>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<p>some Content</p>
<p></p>
<p></p>
</div>
</div>
Hope it helps,

JQuery timepicker flows out of HTML text box

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>

facebox is not working properly in scala

<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/facebox.js")" type="text/javascript"></script>
<link href="#routes.Assets.at("stylesheets/facebox.css")" media="screen" rel="stylesheet" type="text/css"/>
<script>
</script>
<body>
text
<div id="info" style="display:none;">
hello world
</div>
</body>
Facebox and div tag are not showing.I am beginner of ajax so please help me .
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})

How to manually set timepicker

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
});

Categories