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();
});
Related
I create fields dynamically after button click. The fields contain color picker and time picker - but when the controls open you cannot select from them. Although both color picker and time picker are working fine in the non-dynamic part of the page.
I think the jQuery/javascript cannot see the dynamic part.
I could use some help.
This is the UI
This is the function that creates the new row:
function addNewActinity(tt, day) {
debugger
var div = $("<tr />");
var rows = $('#TextBoxContainer tr').length;
$('#activitiesRow').clone().attr('id', 'activitiesRow' + rows).show()
.appendTo('#TextBoxContainer')
.find('input').attr('class', 'myDatepicker').datepicker({
format: 'hh:mm',
ignoreReadonly: true,
allowInputToggle: true})
}
You will have to re-attach the Date Picker and Color Picker after you dynamically create them.
So after you create the new element dynamically, you give it ID. use this ID to attach the Date/Color Picker after creation ($('#datepickerID').datepicker();) you can also use JQuery selectors for class name. ($('.datepicker').datepicker();)
please reference these:
Jquery datepicker on dynamically created inputs changing the date of the first input
Use JQuery Datepicker on dynamically created fields
I have this DateTimePicker:
I need edit only the time , so I need only show this :
code:
setDateTime: function(index){
$('#date_time_'+index+'_id').datetimepicker({
showClose:true,
format: 'DD/MM/YYYY HH:mm',
ignoreReadonly: true
});
},
So the input showing the date and time is fine, but I need edit only the time
Im using this :
bootstrap-datetimepicker
but I don't know what option use.
Sorry my english.
unfortunately I think that without updating of bootstrap datetimepicker lib you would have to use alternative. As this library is not prepared for just time picker.
Please use something like this instead. Same format, but more options for you:
http://tarruda.github.io/bootstrap-datetimepicker/
Then you can set what you want just with this
$('#date_time_'+index+'_id').datetimepicker({
pickDate: false
});
Just specify only time in the format like this:
https://jsfiddle.net/9jkxL4su/
$('#datetimepicker1').datetimepicker({
format: 'LT'
});
EDIT:
To show calendar (toggle) icon, you'll need to fire a toggle-click when the picker is shown:
https://jsfiddle.net/pv8Lhy9t/
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
showClose: true
});
$('#datetimepicker1').on("dp.show", function(){
var toggle = $(this).find('a[data-action="togglePicker"]');
if(toggle.length > 0) toggle.click();
// To hide the toggle back to calendar button, uncomment line below
// $(this).find('a[data-action="togglePicker"]').hide();
});
NOTE:
You can remove the ability for the user to toggle back to edit the date. Just uncomment the last line as shown in the code above.
READONLY: To restrict ability to edit date manually, just give the input field a readonly attribute and also set the ignoreReadonly property to true in the picker: https://jsfiddle.net/xgm99t5o/
What is the name of the component ?
Perhaps you can use something like:
pickDate: false;
or only
format: 'HH:mm',
In this component it looks like: https://tarruda.github.io/bootstrap-datetimepicker/
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 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...
I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});