I tiered running bootstrap date & time picker locally by creating an html file but it doesn't worked although its working fine when i pasted the code in JSFiddle (link : https://jsfiddle.net/fuu1v2t0/10/).
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
<div class="well">
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
I included these files for the same.
bootstrap.min.js,
bootstrap-datetimepicker.min.js,
bootstrap-combined.min.css,
bootstrap-datetimepicker.min.css,
bootstrap.css,
Please make sure you have called jQuery files also.
"message": "Uncaught ReferenceError: $ is not defined",
could mean that you don't have the jQuery libraries called in the page.
Try adding this script link to your header. https://code.jquery.com/jquery-3.0.0.min.js
Here works with jQuery:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="well">
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
Reason it worked in fiddle even though you didn't include jQuery is:
Click on javascript settings tab and you will see jQuery is already there.
Add JQuery in the head tag:
Code:
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
:)
Related
I have problem with two datepickers on the same page, they just don't want to work together.
I have found topics connected to mine but they didn't solve my problem:
Conflict with two jquery datepickers on same page
Javascript two datepicker conflict
My fields looks like that:
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
Initialization looks like that:
$(document).ready( function() {
$(document).find('#date-filter-from').datepicker();
$(document).find('#date-filter-to').datepicker();
});
Now what happens. First datepicker I click works okey. Then when I click second it doesn't work at all OR when I pick a date it shows error in console:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
I will appreciate any help or ideas.
Use a JQuery selector instead of $(document).find
$(document).ready(function() {
$('#date-filter-from').datepicker();
$('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
I wanted to use the date time picker like following
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
<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>
But the problem is that the I got error in JS undefiend is not a function
Im using bootstrap3 in MVC5 application what can be the issue here ?
I try to add the following librarys which doesnt help...
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
Please call jQUery top off the all script
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Have you tried putting your Datepicker instantiate script below HTML code?
<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">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
Add jquery
<script src="~/Scripts/jquery.ui.datepicker-de.js"></script>
In my case, there was problem with jquery-s involved, i need jquery for my layout, and i was importing that part after
#RenderBody()
I fixed this by creating in BundleConfig script only for jquery and imported that script before RenderBody() part, of course in my Layout part.
bundles.Add(new ScriptBundle("~/bundles/jquerym").Include(
"~/Scripts/libs/jquery-{version}.js"));
After this, i didnt have problem that jquery is not ready, and i didnt have to import that part on page where i show datetimepicker. This is different datetimepicker from yours but it's basically same:
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css" />
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
I use bootstrap-datetimepicker in my tornado project. I tried the sample in the fold "sample in bootstrap v3", and it worked fine. But when I use it in my tornado project, it occured a bug:
click the calendar button
click the left arrow key
click the left arrow key again
I set it to years view when first click the button. And when I click the left arrow, it should change to other years before, but it goes to the mouths view. Then I click the left arrow again, it goes to the days view. It not always performance wrong this way, sometimes it works well. I do not know what is the problem.
My code below:
<meta charset='utf-8'>
<html>
<head>
<title>USTC Club</title>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<link href='http://localhost:8888/static/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src='http://localhost:8888/static/jquery-2.1.1.min.js'></script>
<script src='http://localhost:8888/static/bootstrap.min.js'></script>
</head>
<body>
<link href='http://localhost:8888/static/bootstrap-datetimepicker.min.css' rel='stylesheet' type='text/css' media='screen'>
<form action='/setting' method='post' class='well form-horizontal col-md-8' enctype='multipart/form-data'>
<div class='form-group'>
<label class='col-md-2 control-label'>birthday</label>
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd">
<input type='text' name='birth' class="form-control" value="03 七月 1980" size='16' readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<button type='submit' class='btn btn-danger'>submit</button>
</form>
<script src='http://localhost:8888/static/bootstrap-datetimepicker.min.js' charset='utf-8'></script>
<script src='http://localhost:8888/static/bootstrap-datetimepicker.zh-CN.js' charset='utf-8'></script>
<script>
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 0,
todayBtn: 0,
autoclose: 0,
todayHighlight: 1,
startView: 4,
minView: 2,
forceParse: 0
});
</script>
</body>
</html>
All the JS and CSS files are in the path "/static" from my localhost:8888 server. I test that when the html file locate JS and CSS files in the local, the calendar work well. For example, the
<link href='http://localhost:8888/static/bootstrap.min.css' rel='stylesheet' type='text/css'>
changed into
<link href='bootstrap.min.css' rel='stylesheet' type='text/css'>
, the calendar work well. Why is that?
Assume the following simple HTML:
<html>
<head><title>Test</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<href="#" id="doExport">Export Now</a>
<div id="exportPopup">
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
</body>
</html>
Now also assume that there is CSS that styles #exportPopup appropriiately and sets it to display:none initially. This brings me to two questions:
How do I make that hidden DIV (#exportPopup) show up right where the #doExport link is clicked?
How do I use the JQuery datepicker on those two input boxes?
For Question 2 I have already tried this:
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
and it just doesn't work when I click those boxes. I hope someone can enlighten me.
I have created a rough model at http://jsfiddle.net/santoshjoshi/32enE/1/
so basically used the jQuery dialog plugin you need to add following code open the dialog box
HTML Code
Export Now
<div id="exportPopup" style='display:none'>
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
JavaScript Code
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
$( "#doExport" ).click(function() {
$( "#exportPopup" ).dialog( );
});
also please have a look at jQuery dialog documentation to customize your popup/dialog
http://api.jqueryui.com/dialog/
'UPDATE'
used following resources
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css ' Theme is smoothness'
I'm working in a ASP.NET MVC 3 application, and I'm trying to use jQuery's Sortable. I already have a jQuery DatePicker working. In my View I have the following code:
<link href=#Url.Content("~/Content/jquery_css/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src=#Url.Content("~/Scripts/jquery.ui.core.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.datepicker.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.widget.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.mouse.js") type="text/javascript"></script>
<script src=#Url.Content("~/Scripts/jquery.ui.sortable.js") type="text/javascript"></script>
Here is the initializer code:
<script type="text/javascript">
$(document).ready(function () {
$("#DateBegin").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#DateEnd").datepicker({ dateFormat: "dd/mm/yy" }).val();
$("#MenuPages").sortable("enable");
});
</script>
The DatePicker work seamlessly. Here is the code:
<fieldset>
<legend>Search history</legend>
<p>
Begin: <br />
<input type="text" id="DateBegin" name="DateBegin" value="" />
<br />
End: <br />
<input type="text" id="DataEnd" name="DataEnd" value=""/>
<br />
</p>
<button>Search</button>
</fieldset>
But the Sortable does not work. The code:
<ul name="MenuPages" id="MenuPages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
I downloaded the DatePicker about a month ago, and downloaded the Sortable now. I put the jquery.ui.mouse.js, jquery.ui.widget.js and jquery.ui.sortable.js in the session. I also replaced jquery.ui.core.js.
I don't know if it was necessary, I also copied jquery-ui-1.8.19.custom.js to the session (there's also jquery-ui-1.8.11.js and jquery-ui-1.8.11.min.js there).
Don't know where the source of the error could be.
Instead of
$("#MenuPages").sortable("enable");
try
$("#MenuPages").sortable();
to initialize the sortable.