I'm using JQuery Mobile with it's mobile themed datepicker plugin. Here is the relevant code, as per JQuery Mobile Datepicker demo, that works just as expected:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="jquery.mobile.datepicker.css"/>
<script src="jquery-1.11.3.min.js"></script>
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="jquery.mobile.datepicker.js"></script>
</head>
<body>
<input id="servicedate" name="servicedate" data-role="date" type="text" />
</body>
Above produces properly styled mobile datepicker tied to "servicedate" input like this.
Now, any attempt to interact with datepicker, like dynamically changing any of the options, causes it to lose its mobile style. To the bottom of body, I add a:
<script>
$("#servicedate").datepicker({ dateFormat: "DD, MM dd yy", });
</script>
... and it now, while option does work, produces rather unpleasant looking, un-themed datepicker like this.
Any help/guidance with what I am doing wrong would be appreciated. Thanks.
You need to add a reference to jqueryUI.css to your header
Something like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
I would prefer to not have to do this but its the only way I got it to work.
(edited)
Related
I have trouble including Jquery in my HTML page. I'm trying to display a calendar clicking on a button, but the calendar is not showing up. The following error showed up : $(..)Datapicker is not a function. I've looked up on internet, and people said it was because of multiple including. But I'm pretty sure that I've only included Jquery once, because when I remove the Jquery include, it says that I do not include it. Here is the header:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<script src="https://use.fontawesome.com/6cd7c64e2b.js"></script>
<link rel="stylesheet" type="text/css" href="/static/app/css/control/style.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/control/ir-button.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/recorder/style.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/static/app/js/recorder/timer.js"></script>
Note that the js script is in the header because I wanted to test it as it was not working in an external file!
Thanks in advance!
You need to include jQuery (core) too. Actually you only added jQuery UI, witch is an extension for jQuery itself.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
And are you sure using such an old version of jQuery UI? Current version of jQuery UI is 1.12.0, working with all jQuery versions since 1.7.
Try to fix it by following order and version of jquery files. Check below code snippet.
$( function() {
$( "#datepicker" ).datepicker();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type=text id="datepicker"/>
I am trying to use the button from the jQuery UI. for some reason, my button does not work properly. To test it out, I tried making the button to be disabled but when I run the program, it is still clickable. My script path files are right because I was using the slider jquery ui widget and it worked.
This is my code for my the script of my button:
<script>$(document).ready(function(){
$("#dateButton").button({
disabled:true
});
});
});
</script>
This is my button delcaration:
<button id="dateButton"> Date </button>
And these are the scripts I am using (using bootstrap):
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
ALSO, if I were to call a function when the button is clicked, would I write it like this?:
$("#dateButton").button({
Code goes in here for the function
});
bootstrap and jQuery UI do not get along with button see https://github.com/twbs/bootstrap/issues/6094
Solution is to use noConflict
(function() {
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
}());
$(document).ready(function() {
$("#dateButton").button({
disabled: true
});
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" />
<button id="dateButton"> Date </button>
https://jsfiddle.net/m5ergv2a/
Even though your declaration is current for initializing a jquery UI button, you need to associate it during the page load which can be done during document.ready function.
$().ready(function()
{
$("#dateButton").button({
});
$("#dateButton").click(function(){
// do stuff here
alert();
});
});
Example : http://jsfiddle.net/DinoMyte/xBB5x/10222/
Also, make sure to get the reference to jquery-ui.css from CDN to confirm that the api is loaded correctly .
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
I'm using Bootstrap 3 DateTimePicker but having some minor issues.
Basically, on the dp.show event, how do I get the source control? As far as I can tell, there is no parameter sent with the event, so I'm having a hard time figuring out which control actually showed.
(I have many pickers in my application)
Standard JQuery would tell me I could use e.Target, but there is no e sent with the event :(
How do I handle this?
You can attach a handler to your datepicker collection
$('.datepicker').on('dp.show', function() {
// this here will refer to the currently showing widget
console.log(this);
});
This is the standard bootstrap way of dealing with events.
EDIT: if you read the source code, the event is bound to the element with which the datepicker is initialized: https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js#L451
you can use events like below
<script src="//code.jquery.com/jquery-2.1.3.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" type="text/css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#datetimepicker6').datetimepicker();
$("#datetimepicker6").on("dp.show", function(e) {
console.log(e);// e is event and use console to explore other options
});
}); //]]>
</script>
</head>
<body>
<div class="input-group ">
<input type="text" class="form-control" id="datetimepicker6">
</div>
</body>
</html>
I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.
Here's how I render it.
<input type="text" class="form-control timepicker appt_time" style="width:200px;">
<script>
$('.timepicker').timepicker();
</script>
Here's how I set them in my header
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">
<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>
I got the css files and the js files for the timepicker
Here.
Any ideas what's causing this? Thanks!
You have got css and js files but you've missed to capture the glyphicons.
The glyphicons are responsible for showing the buttons on the timepicker.
If you can inspect your developer tools on your buttons you can see that the images seems to be missing.
Here is what i've found on the site that you have picked timepicker
Include the glyphicons png file on your site to get the images work perfect.
Hope this helps
Try script as...
<script type="text/javascript">
$("input[id$='timepicker']").timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true
});
</script>
Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);
I am trying to use the Jquery UI timepicker but when I click on the text box, the timepicker is not displayed. What I want to know is have I included all of the requirements for this type of plugin and is the function for the timepicker correct?
Below is the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<link rel="stylesheet" type="text/css" href="MyStyles.css">
<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery.ui.timepicker.css"/>
<link rel="stylesheet" type="text/css" href="jquery/ui-lightness/jquery-ui-1.8.14.custom.css"/>
<script type="text/javascript" src="jquery/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
$(function() {
$( "#timepicker" ).timepicker();
});
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>5: Time:</strong><input type="text" id=""></p>
</form>
</body>
Your jquery selector is looking for an element with the id of timepicker.
In your example there are no elements with that id
You need to set the id of the input element to timepicker.
Example:
<input type="text" id="timepicker">
the documentation that I see shows it accepting an empty argument array
$('#timepicker').timepicker({});
Nice to know they added this, I've wanted this in the past and will be using it on a site i'm in the process of creating