I have a jquery UI datePicker in my page. I have a text box on which the date is displayed. The code is:
$("#cal").datepicker({
minDate: new Date(),
defaultDate: new Date(),
buttonImage:
'/images/calendar.gif',
constrainInput: false,
closeText: 'Close',
showButtonPanel: true,
showButtonText: 'Choose a date',
buttonImageOnly : true,
showOn : 'button'
});
$("#till").datepicker('setDate', today);
I want to disable this on some conditions. I use the following code to disable:
$("#cal").datePicker('disable');
It blacks out the text box but the image is still clickable. The problem is in IE, the date picker pop up comes up but does not close when the image button associated with the date picker is clicked.
I also tried to bind a onclick function with the image to make it non-clickable. But that does not work as well.
How can make the date picker image button non-clickable when the date picker is disabled.
Any help would be appreciated.
Thanks,
Farzana
I'm not sure if it will work, but you should try to change the showOn property right after the disable call.
$("#cal").datepicker('disable');
$("#cal").datepicker( "option", "showOn", 'focus' );
Give it a try!
why dont you hide the button itself by .hide() or adding class or style
or you can add style to make it disable
.addClass or .add to add css
I would use .unwrap(); on the <img> to remove the <a> wrapper. That is if it's wrapped directly in the <a> tag.
Try this:
$("#cal").datepicker("option", "disabled", true);
This works for me -- gotta grab the button and disable it.
$('#MyDatePicker').datepicker({}).next('button').attr('disabled', 'true')
Related
I have content that is dynamically added into the index page via ajax calls with the history api (I use pushstate and onpopstate).
For a specific page that will be loaded I have a form with a date field like this:
<tr>
<td class='input-group date' id='datetimepicker1'>
<input style='width: 250px; border: 0; outline: none; name='invoicedate' value='2017-10-01' data-date-format='YYYY-MM-DD'>
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</td>
</tr>
from the index page I want to attach a click event to datetimepicker1 so that the Bootstrap datetimepicker widget will show. I use this snippet:
$("#container").on("click", "#datetimepicker1", function(){
$("#datetimepicker1").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
});
The problem is that I need to click twice on the datepicker before the widget shows up.
After doing that the datepicker shows up directly when clicked for the third time.
I have tried to wrap the above with $(document).ready(function () { } but that didnt work, because I think the added content with ajax calls via innerhtml doesn't fire a page reload. Also some people said to use delegated events which I do as you can see and it still doesn't work.
Anyone got thoughts on this why this happens? I also tried to inspect the code with Google Developer tools from the console pane: monitorEvents(window, "click") and $._data(($0), 'events') but it is too verbose and I don't know how to use the information for debugging like event bubbling.
Thanks for helping!
Your problem is that you're adding datepicker on click on #container - that's probably some div that wraps everything:
$("#container").on("click", "#datetimepicker1", function(){
$("#datetimepicker1").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
});
So first time you click you're actually adding datepicker on your container, your code should look like this without any onclick event:
$("#datetimepicker1 input[name='invoicedate']").datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD',
allowInputToggle: true,
useCurrent: false,
});
You also need to wrap this up on element creation if this is done dynamically.
I use pop-up datapicker (DHTML Date/Time Selector), which appears due to icon click. But if you change the size of browser window, it stays fixed on the page.
Is there any way to bind calendar to icon this way?
Image
Calendar.setup({
context: self,
firstDay: 0, /* first day of the week */
inputField: "firstDateVal", /* id of the input field*/
button: "date-field-from-button", /* trigger for the calendar (button ID)*/
align: "Bl",
singleClick: true,
showsTime: true,
timeFormat: "24",
onSelect: function (){
}
});
Try using jQuery datepicker.
See this documentation : https://jqueryui.com/datepicker/
Ok, so I am using a datepicker with FuelCMS and have run into an odd issue and am hoping I can get some help.
I have a admin area that includes a date picker for adding events, but it needs to have the ability to add an unlimited number of events. The code that I have works, but only in an odd way. When the system is loaded it automatically creates one date field, but the datepicker will only come up after you have clicked to add a second field. At this point it will work in either field perfectly fine.
This obviously creates some usability issues so I am hoping that somebody might be able to see where I went wrong.
$("body").on("click", ".datepick", (function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
}))
You need to use focus instead of click. Using click means you have to click in the input field, then it activates, so you will have to click out of the field and back into it for this to work. You also had $(this).datepick instead of $(this).datepicker.
$("body").on("focus", ".datepick", function () {
$(this).datepicker({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
JSFiddle
try this code.
$(document).ready(function(){
$("body").on("click", function () {
$(this).datepick({
dateFormat: "yyyy-mm-dd",
rangeSelect: true
});
});
});
I am trying to add an event blur on input in order to hide a calendar.
The plugin I am using to show the calendar is the foliowing eternicode/bootstrap-datepicker.
Here is the source code http://jsfiddle.net/KLpq7/75/
var inputs = $('.datepicker').datepicker({
autoclose: true
});
inputs.on('blur', function () {
console.log($(this));
// I would like to hide just the date picker
//$(this).hide();
});
You can try this:
var inputs = $('.datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
Fiddle: http://jsfiddle.net/KLpq7/82/
inputs.on('blur', function () {
inputs.datepicker('hide');
});
This is a known bug* -- if you use "datepicker" as the class for your inputs, it will interfere with the datepicker code, because datepicker is also the class used for the picker pane. Using a different class for your pickers should fix the issue for now.
* There aren't any open tickets for it at the moment, but it is acknowledged as a minor bug
Try this updated fiddle. I think that since you were using a class selector there was some conflicts in the blur event handler. I have separated each calendar picker by ID and it seems to work fine now.
When I open a datepicker like that:
$("#checkindate,#checkoutdate").datepicker({
onClose: {
//I'd like to disable the closing
}
);
I'd like to prevent the closing of the datepicker dialog depending on a condition. The ideal would be that return false would stop this event.
I tried modifying the source code and there is no trivial solution.
What I want to do is to be able to select the checkout date without reopening another dialog.
Any idea?
I don't think it's possible to pick multiple dates from one datepicker. You probably will need to do something like their date range demo:
http://jqueryui.com/demos/datepicker/#date-range
$('#datepicker').blur(function(){
$(this).datepicker('show')
})
open up http://jqueryui.com/demos/datepicker/ and copy the code on the javascript console and see what happens
var selectTask = function(selectedDate, calendar) { // pretends to remain open
setTimeout(function() {
$(selector).datepicker('show'); // don't go away ...
}, 0);
};
// datepicker instance
$(selector).datepicker({ onSelect:selectTask, duration:0 });
It's an illusion of prevent closing; might reach the goal.
After spending around a day finally got it,
$( "#selector" ).datepicker({
onSelect: function ( dateText, inst ) {
this._updateDatepicker(inst);
}
});
For all code, click here.
In this question: jQuery UI Datepicker - Multiple Date Selections the accepted answer explains how to implement the multiple date selection in one datepicker.
To prevent the datepicker closing after the selection of a date, you can put this in the onClose option:
$(this).data('datepicker').inline = false;
And add this in onSelect option:
$(this).data('datepicker').inline = true;