I have an application with all the drop down boxes customized by select2 plugin, obviously like this:
$("select").select2();
However, the select element on a jquery datepicker is not customized. And I couldn't figure out where to initialize this in the jquery datepicker function. The following is what I want to achive. I want a function that can replace init that can get the datepicker dom element.
$(".datepickerInput").datepicker({
init : function(datepickerElement) {
datepickerElement.find("select").select2();
}
});
I appreciate your help. Thanks.
The issue you are facing is that Datepicker doesn't have a "after show" callback function. That is, there is no available method/option that can run code after the datepicker has been showned.
There is some discussion and some possible answers in jQuery Datepicker "After Update" Event or equivalent
So, for now, you can make that work by extending Datepicker, like this:
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function() {
// Code from the related question. Used the answer from #Markus
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
$.datepicker._updateDatepicker_original(inst);
var afterShow = this._get(inst, 'afterShow');
if (afterShow)
afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
// Now that we have `afterShow`, we can initialize Select2.
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
afterShow: function() {
$(".ui-datepicker select").select2();
}
});
});
</script>
Related
fellows! I'm doing some frontend work using doT.js for generating content and jquery-ui for displaying tooltips.
{{##def.defboardtooltip:
<div class='tooltip'>
<!-- some html code -->
<a id='bdetails' href='#'>Click for details</a></div>
</div>
#}}
And how it is used:
<div class="participant" title="{{#def.defboardtooltip}}">
I'm trying to add the event to the a element with jquery as such ():
$(document).ready(function () {
// ...enter code here
$('#bdetails').click(function (e) {
// some code
console.log('fired');
});
});
And I never see the "fired". I'm confused.
jQuery Event delegates are your friend here.
Try:
$(function()
{
$(document).on('click', '#bdetails', function(e)
{
var a = $(this);
});
});
This will filter the event to just your #bdetails element, you can use any valid jQuery seletor here also; e.g., 'a' to delegate all anchor tag clicks.
I am using jquery-ui-1.10.4.js and ASP MVC.
In my View I am accepting an optional date as input;
#Html.EditorFor(model => model.Assessment.SsipAccreditationDate)
I have an Editor Template which injects the datepicker class;
#model DateTime?
#Html.TextBox("", (Model.HasValue ? Model.Value.ToLongDateString() : string.Empty),
new { #class = "datePicker", #style = "width:200px;" })
I have jquery code to hook up the datepicker with the date field;
if ($(".datePicker").length) {
$(".datePicker").datepicker({ showOn: 'both', dateFormat: constantDateFormat, changeMonth: true, changeYear: true })
.next('button.ui-datepicker-trigger')
.attr("tabIndex", "-1");
}
When the View is loaded, if this date field is empty the datepicker automatically displays. What I would prefer would be for the datepicker to only be displayed if the user clicks on it or the associated button. This is what the showOn: Both configuration is meant to acheive.
Notice in the jquery the tab index is set to -1, so the reason for the datepicker showing cannot be to do with the field in focus.
So how do I stop the datepicker showing when the View is loaded?
You can disable it by using defaultDate attribute.
$(".datePicker").datepicker({
defaultDate: ''
})
I do not think this is the best answer, but I found I could do this by disabling the datepicker initially, and then enabling it once it has been clicked on;
$(document).ready(function () {
initialiseEdit();
});
var initialiseEdit = function () {
// Disable the datepicker to ensure the datepicker is not shown when the page is loaded
$('#Assessment_SsipAccreditationDate').datepicker("disable");
// Class to stop the control from looking disabled
$('#Assessment_SsipAccreditationDate').addClass('inputBox');
};
// This code is to make the datepicker function as though it is enabled, whether it is or not.
$('.clickEnable').click(function () {
$('#Assessment_SsipAccreditationDate').datepicker("enable");
$('#Assessment_SsipAccreditationDate').datepicker("show");
});
Because '#Assessment_SsipAccreditationDate' is disabled, I had to wrap it with a span containing the clickEnable class and put the click event on that.
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
I have multiple datepickers in one page.
I user class name to set the option for things like appears.
$('.datepickers').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true
});
Then, I want to set onSelect event for two of them.
$('#to').datepicker({
onSelect: function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
}
});
Similar onSelect event setting for others.
However, this would not work. Any suggestion for how to fix this, besides setting all options individually by id?
did you try the following syntax? You don't want to _init the datepicker widget again. You just want to change an option. This is the way to do that with jquery ui widgets.
$('#to').datepicker('option', 'onSelect', function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
});
i created a functional demo here to show a possible solution:
click for the jsfiddle
you don't have to create multiple datepicker methods. just use the "onSelect" method to:
test whether the current datepicker has "#to"
if so, use the "dateText" value from this datepicker to intialize the "#from" datepicker
use the current "inst" value to traverse the dom to the "#from" datepicker and set it's value.
these were the key lines:
onSelect: function(dateText, inst) {
if(inst.id === 'to'){
$('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
}
}
Can any one tell me how I could update a selection in a date picker to a full calendar ie When user selects date from DatePicker then FullCalendar loads events for given date.
Take a look at this : Issue 167: Mini Calender to control Main Calender.
Or make the combination with following example :
$(document).ready(function() {
$("#fullcalendar").fullCalendar({
// .....
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
}
<div id="fullcalendar"></div>
<div id="datepicker"></div>
The "gotoDate (method)" would help you select a date programatically in fullcalendar. So let the user select a date using jquery date picker and register a onchange event on the text input that captures the date. When the onchange fires, use gotoDate to set the date in fullcalendar. Refer - http://arshaw.com/fullcalendar/docs/current_date
This might help anyone coming to this answer to add a gotoDate datepicker to fullcalendar as a custom button
customButtons: {
gotoDate: {
text: 'Go to date',
click: function () {
$(this).datepicker({
autoclose: true
});
$(this).datepicker().on('changeDate', function (e) {
$('#fullcalendar').fullCalendar('gotoDate', e.date);
});
$(this).datepicker('show');
}
},
},
footer: {
'center': 'gotoDate'
},