I am trying to implement the solution here: Highstock + Bootstrap datepicker but I end up with an Undefined error in my console.
jsFiddle: http://jsfiddle.net/rlsaj/r6es2jyc/.
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
orientation: "auto left",
autoclose: true,
todayHighlight: true
});
}, 0);
My goal is to implement the Angular Bootstrap datepicker (http://angular-ui.github.io/bootstrap/) but I think I can solve that if the above fiddle can be fixed.
1.) bootstrap requires a more recent jQuery version.
2.) bootstrap does not contain a native datepicker. I imagine you want to use this, so you'll need to source it in:
<script src="http://rawgit.com/eternicode/bootstrap-datepicker/release/js/bootstrap-datepicker.js"></script>
3.) setDefaults is a method of jquery-ui's datepicker not the bootstrap implementation I link above.
Updated fiddle.
Related
I implemented the jQuery UI datepicker in my site and noticed I couldn't click 'back' to the previous month.
My HTML:
<input type='text' id='date'>
the init script:
$( '#date' ).datepicker( {
numberOfMonths: 4,
showCurrentAtPos: 1,
showButtonPanel: true
} );
I created a jsFiddle with jquery-ui-1.12.1 loading which replicated above problem. I solved it for now my switching to jquery-ui-1.9, but I'd like to be able to use the latest version. Is there anything that can be done to fix this problem?
I did some extensive debugging, the 'prev' button event is being launched, it just doesn't appear to call the update function with the right data, causing the datepicker to be updated with the same month first as it's showing before the click.
I'm starting to think this is a bug, if I set showCurrentAtPos to 0 instead of 1 the datepicker does work as expected (jsFiddle)
Was able to replicate the issue using jQuery 1.12.4 & UI 1.12.1, matching Demo versions: http://jqueryui.com/datepicker/. Working test: https://jsfiddle.net/Twisty/wkpvbp5u/
If I comment out showCurrentAtPos, it works as expected.
JavaScript
$(function() {
$('#date').datepicker({
numberOfMonths: 4,
//showCurrentAtPos: 1,
showButtonPanel: true
});
});
So the issue may be in behavior of this option. I broke it more by setting the value to -1 as a test too. The Next button fails.
Found: https://bugs.jqueryui.com/ticket/15129 so looks like you can use jQuery UI 1.11.4 but not 1.12.1. Might be a fix: https://github.com/jquery/jquery-ui/commit/17404ced478a235651513fa7bef3473ef1b039e8
Hope that helps.
This seems to be a problem with autocomplete in the jQuery UI 1.9.x versions- Is there any way to keep the jQuery UI autocomplete menu open when desired after clicking on some items? In 1.9.2, no matter what I try, the menu just won't stay open, no matter what I try.
I must use jQuery UI 1.9.2. I've seen solutions for earlier versions of jQuery UI that work, but they do not work with 1.9.2.
This code works with an older version of jquery + jquery UI:
var $input = $("input").autocomplete({
source: ['Hello', 'Goodbye', 'Foo', 'Bar']
});
$input.data("autocomplete").menu.options.selected = function(event, ui) {
// clear out old function
};
http://jsfiddle.net/nr757/
Similar code does not work in ui 1.9.2:
http://jsfiddle.net/Db9VE/
$( "#input" ).autocomplete({
source: availableTags,
close : function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
When I load my page the datepicker on my div always show in english, I have to click it to show in other language, as you can see in this fiddle: http://jsfiddle.net/bFHxf/
If you change from div to input there is no problem with it since you have to click it to show... is this some kind of feature or bug?
Any workaround?
I wrapped your code in the $(document).ready() function and that seems to take care of the problem.
http://jsfiddle.net/qtNyr/
Hope that helps!
I think that you are initializing the datepicker too early.
If you wait until the document is loaded, it should work. You can do this by surrounding the existing JavaScript code with
$(function() { existing code goes here });
So the result might look like:
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "nl" ] );
$('#date').datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
})
Link to jsFiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Updating to latest JQuery UI and datepicker is causing the datepicker to always be seen
This is what my code looks like in JavaScript
$(function() {
$("#datepicker").datepicker({ minDate: new Date(2012,7,23), maxDate: new Date(2012,11,14)});
$("#datepicker").datepicker("setDate", new Date());
});
except that when I load it, the datepicker calendar automatically shows up at the bottom of the page. I tried the solution from here but it doesn't work. I also have the datepicker inside an accordion. Would that be part of the problem? Please let me know of any solutions. Thanks!
I have found the solution in this question Updating to latest JQuery UI and datepicker is causing the datepicker to always be seen:
$(function() {
$("#datepicker").datepicker({ minDate: new Date(2012,7,23), maxDate: new Date(2012,11,14)});
$('#ui-datepicker-div').css('display','none');
$("#datepicker").datepicker("setDate", new Date());
});
My jquery UI datepicker is not showing week numbers, even with the showWeek:true option set. Here is my code:
<script type='text/javascript'>
$(document).ready(function(){
$('#startDate').datepicker({
changeMonth: true,
changeYear:true,
dateFormat: 'd-M-yy',
firstDay: 1,
showButtonPanel: true,
showWeek: true
});
});
</script>
<input type='text' name='startDate' id='startDate'>
From what I understand, you ONLY need to set the showWeek option to make this work - the weekHeading has a default of 'Wk' and the calculateWeekNumber has a built in ISO week number calculator function.
Also, for some reason the 'Today' button on the button panel is disabled?! Any advice would be most appreciated. Thanks.
I think you might be using jQueryUI v1.7.2.
You need v1.8 to get the showWeek option. I have v1.8rc3 and it works well.
demo:
http://jsbin.com/eliki