I am using bootstrap datepicker.js but after select the date the datepicker not hide.if i click in any other place it will hide?
what is the solution of this problem?
I have also tried this
$(".datepicker").on('changeDate', function(){
$(".datepicker dropdown-menu").css("display","none");
});
but this is also not working and datepicker.js returns an error(that date is not defined).
You need to use . to target class dropdown-menu:
$(".datepicker").on('changeDate', function(){
$(".datepicker .dropdown-menu").css("display","none");
});
It's not clear from the question which datepicker you are using, but if it is #eternicode's datepicker for boostrap, there is an autoclose option that does exactly what you want...
Related
My original web page is using Bootstrap datepicker.
However, for adding an existing old date-picker with jQuery-UI, I need to make these two coexist.
I already read the articles in BootStrap DatePicker NoConflict and jQuery ui datepicker conflict with bootstrap datepicker.
My coding logic is:
Step 1: Load jquery-ui.custom.min.js before bootstrap-datepicker.js, bootstrap.min.js, bootstrap-datepicker.js, and bootstrap-select.js.
Step 2: Add the following scripts:
if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict)
{
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
}
$(".DatePickerForjQuery-UI").datepicker({});
$(".DatePickerForBootStrap").bootstrapDP({});
Step 3: Set up each's datepicker parameters
$(".DatePickerForjQuery-UI").datepicker({.........});
$(".DatePickerForBootStrap").datepicker({.........});
The result is: $(".DatePickerForjQuery-UI") works good, but $(".DatePickerForBootStrap") will show Bootstrap and jQueryUI date-picker at the same time when I click it.....
Have any ideas why $(".DatePickerForBootStrap") doesn't show correctly?
In case of conflict between jQuery and bootstarp datepicker you can open your jQuery-ui.js and rename the datepicker() function to datepickerj() or by any other name. Now they are two different method . Can use them by different way without any conflict and without any distortion due to conflicting css class
Finally found the answer.
In step 3, if we need to use Bootstrap date-picker, the syntax is:
$(".DatePickerForBootStrap").bootstrapDP({.........});
Since we already update/give the new definition of Bootstrap in Step 2.
So, all the related Bootstrap date-picker functions will always use "bootstrapDP" to work.
Like,
$('.datepicker-textbox')
.bootstrapDP({
update: $(this).val(),
startDate: '<%= DatePickerStartDate %>',
format: '<%= DateFormatClientSide %>'
})
.on('changeDate', function (ev) {
$(this).bootstrapDP('hide')
})
.on('hide', function (ev) {
$(this).removeClass('opened');
});
On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});
Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo
If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.
I have jQuery UI datepicker running with some highlighted dates with custom titles. What I want to do is to display these titles with jQuery UI tooltip. Simplified code (all days higlighted for simplicity):
jQuery('.seminars__calendar').datepicker({
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
},
});
jQuery('.seminars__calendar .highlight a').tooltip();
This doesnt work. I suppose that is because the calendar is created dynamically and tooltip is not attached to these dynamically created links. If I change the last line to jQuery('.seminars__calendar').tooltip(); It works fine but tooltips are also shown on "next", "prev" links in calendar and I dont want that. I want tooltip on highlighted days only. Is it possible?
Jsfiddle: http://jsfiddle.net/yfjo5a0g/ (It is working at first but if you switch to the next month in datepicker it stops)
you could just use the JQuery tooltip's option content like this:
$('.seminars__calendar').datepicker({
beforeShowDay: function(date) {
return [true, 'highlight', 'The custom title'];
},
});
$('.seminars__calendar .highlight a').tooltip({content:"this is a test"});
But it will overwrite your The custome title.
--EDIT--
Working fiddle here: http://jsfiddle.net/oe5kjwga/
And doc here: http://api.jqueryui.com/tooltip/#option-content
Ok I have solved this. It is needed to reattach .tooltip() after datepicker redraws itself after month/year change. I have tried to add it to onChangeMonthYear datepicker event but no luck (callback is called before datepicker is redrawn).
This works for me (adding toolip everytime you enter calendar with a cursor):
$('.seminars__calendar').on('mouseenter', ".ui-datepicker-calendar", function() {
$(this).tooltip();
});
My page has a JQuery UI DatePicker on an input field #my_date.
I can launch the DatePicker using :
page.execute_script %Q{ $('#my_date').trigger("focus") }
How can I write a step for selecting a particular date ?
I was able to solve this by using :
page.execute_script %Q{ $("a.ui-state-default:contains('17')").trigger("click") }
Where 17 is the day of the current month to be selected, in my case.
I didn't feel an acceptance test of datepicker is needed; I just use the field set method
find(:css, ".my_date-alt").set '12/31/1999'
Trent Richardson's great Jquery Timepicker plugin instead of the Jquery UI datepicker, but I can't seem to display the datetimepicker or timepicker inline, like you can with the datepicker in Jquery UI.
This should be all the code that's needed, at least it's how it works with the Jquery UI datepicker:
<div class="timepicker"></div>
<script>
$(function() {
$('.timepicker').timepicker({
ampm: true
});
});
</script>
Using the datepicker in that same way would result in an inline calendar that always appears, no need to click an input field.
How can I display an inline time picker using datetimepicker or another Jquery plugin?
I think you need to call timepicker from an input text element not a div element.
<input type="text" name="time" class="timepicker"/>
Check out the Fiddle
Turns out this is a known issue and it's in fact fixed in the latest dev branch for Timepicker. Using the dev branch the inline feature works and I've had no problems.
this is from working code for static jquery datetimepicker view :
$('#datetimepicker').datetimepicker({
inline: true,
lang:'uz',
// disabled: true,
format:'d.m.Y H:i',
//
});
and in html:
<div id="datetimepicker"></div>