Non-working code:
$('#datepicker').datepicker(
{ onSelect: function(dateText, dpo){
var selectedDate = dpo.getDate();
});
From the API, I see that I can use var currentDate = $( ".selector" ).datepicker( "getDate" ); in lieu of the non-working code I posted. The onSelect documentation states "The function receives the selected date as text and the datepickerinstance as parameters". If the date picker is one of the parameters, why is the above code incorrect?
The inst parameter of the onSelect is an internal object that represent the current state of the datepicker. Normally you don't need to use it, you can use this, it refers to the original input field.
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.
Code:
$('#datepicker').datepicker({
onSelect: function (dateText, dpo) {
var selectedDate = $(this).datepicker( "getDate" );
console.log(selectedDate)
}
});
Demo: http://jsfiddle.net/IrvinDominin/Y3hR6/
Related
I would like to ask you for advice.
On one page I have many jQuery UI datepicker`s. They are visible in Bootstrap Modal when user click on button.
Unfortunately this page is loading very slow(Especially in IE8). I know that datepicker in IE8 is causing slowness but sometime I receive that script stop working.
This is my datetimepicker in Knockout like a custom bindingHandlers
ko.bindingHandlers.datetimepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datetimepickerOptions || {};
$(element).datetimepicker(options);//Line 5
//handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datetimepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datetimepicker("destroy");
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datetimepicker("getDate");
if (value - current !== 0) {
// LINE 23 $(element).datetimepicker("setDate", value);
}
}
};
I comment Line 23 because before I had the same issue with performance. But then I had the picker like that
<input data-bind="datetimepicker: date,datepickerOptions: { minDate: new Date() }"/>
When I comment it everything works great.
Now I change the do (because I want to have visible datepicker when the modal is shown) and I have the same issue.
When I comment LINE 5 there is no slowness but also my datepicker is not vissible.
Can I call the binding of the datepicker's when user click on button to see the Modal? In this way the binding for datepicker's woudn't be initialized during the page loading?
If I change the jQuery UI datepicker to bootstrap datepicker, there will be some changes in performance?
You could potentially "lazily" initialize your datepicker's. For example, to go along with your existing datepicker binding, you could create a lazyDatepicker binding.
Something like:
ko.bindingHandlers.lazyDatepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//keep the field's value in sync until the datepicker binding has been initialized
var updater = ko.computed(function() {
var options = ko.unwrap(allBindingsAccessor()),
value = $.datepicker.formatDate(options.dateFormat || "mm/dd/yy", ko.unwrap(valueAccessor()));
$(element).val(value);
});
//use "one" so this only fires a single time on initial focus
$(element).one("focus", function() {
//binding will now keep value in sync
updater.dispose();
//apply the actual datepicker
ko.applyBindingAccessorsToNode(element, {
datepicker: valueAccessor,
datepickerOptions: function() { return allBindingsAccessor.get("datepickerOptions"); }
})
});
}
};
Really this just applies the datepicker binding when the field is focused. I also put some logic in there to keep the field up-to-date with the model until the datepicker is actually initialized (the updater computed).
Here is a fiddle: http://jsfiddle.net/rniemeyer/GvLfV/
First up: check this fiddle.
I have sortable array of elements created with the Knockout sortable library. When I initially apply the binding the cleditor initializes fine.
However, when sortable elements are sorted, the cleditor fails to re-initialize (I'm not sure what happens but cleditor fails). The cleditor just displays "true" instead of actual value in Firefox, and nothing in all other browsers.
I'm trying to figure out where the problem is, whether it is on the custom binding, or jQuery-UI, or the Knockout sortable library?
I am not recieving any errors in my console.
ko.bindingHandlers.cleditor = {
init: function(element, valueAccessor, allBindingsAccessor) {
var modelValue = valueAccessor(),
allBindings = allBindingsAccessor();
var $editor = jQuery(element).cleditor({
height: 50,
controls: "bold italic underline | bullets numbering | undo redo"
});
$editor[0].change(function() {
var elementValue = $editor[0].doc.body.innerHTML;
if (ko.isWriteableObservable(modelValue)) {
modelValue(elementValue);
} else {
if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].cleditor) {
allBindings['_ko_property_writers'].cleditor(elementValue);
}
}
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()) || '',
$editor = jQuery(element).cleditor();
if ($editor[0].doc.body.innerHTML !== value) {
//$editor[0].doc.body.innerHTML = value;
$editor[0].doc.body.innerHTML = value;
$editor[0].focus();
}
}
};
How can I make the cleditor to work, even after the elements are sorted?
I found this resource, but I couldn't find anything wrong in code as said in that topic.
The link you provided was helpful. The CLEditor refresh method is the right way to update it after it's dragged. It just needs to be done at the correct time, using the sortable stop event.
stop: function(event, ui) {
$(ui.item).find("textarea").cleditor()[0].refresh();
}
http://jsfiddle.net/mbest/rh8c2/1/
I also worked to integrate this into your cleditor binding. In the init function:
jQuery(document).on('sortstop', function(event, ui) {
if (jQuery.contains(ui.item[0], element)) {
jQuery(element).cleditor()[0].refresh();
}
});
I also made a change in the update function to keep the <textarea> value in sync, because refresh updates the editor's value from the <textarea>:
$editor[0].updateTextArea();
http://jsfiddle.net/mbest/jw7Je/7/
I'm new to JS and I have recently ran into a problem with the setTimeout function while using the Jquery-UI Datepicker.
I would like to get a value from within a function referenced in a setTimeout function and use that value on other areas of my code. However, because setTimeout delays the code execution, I can't seem to assign and use the said value.
Here's part of the code
$calendar.datepicker({
inline: true,
onSelect: function (dateText,inst) {
var startDate;
window.setTimeout(function(){getStartDate();}, 1);
// ... Do something with startDate. No matter how I try, startDate is always undefined.
function getStartDate () {
var r = $calendar
.find('.ui-datepicker-current-day')
.parent()
.find('.selectable')
.first()
.children()
.text();
startDate = new Date(date.setDate(r));
return startDate;
}
},
});
I need to use the setTimeout function otherwise the value returned from Jquery UI datepicker is wrong.
Ideally, I'm looking for startDate to be the value returned from the function getStartDate() that is set within the timeout function.
What I'm writing is obviously wrong and I have no idea how to return the startDate value from within the timeout function and use it elsewhere
Help is very much appreciated. Thanks!
I am using the custom binding provided in How to create an auto-complete combobox?
I want to allow the user to either select a value from the list of suggestions or enter a value that is not in the list of suggestions. How can I get the value of the input into my observable field?
For example, if the user types 'smi' the autocomplete list will show Smith and other surnames beginning with 'smi', however, if they do not select an option from the list, I just want to set the value of my observable field to be 'smi'. At present, the only way the observable propety is set is when the user selects an item from the list of suggestions.
I have the following code (HTML):
<input type="text" data-bind="
value: surname,
jqAuto: { autoFocus: true },
jqAutoSource: surnames,
jqAutoQuery: surnameAutocomplete,
jqAutoValue: surname"
/>
JavaScript view model (simplified):
var vm = {
surnames: ko.observableArray(),
surname: ko.observable(),
surnameAutocomplete: function (searchTerm, result) {
repository.surnameAutocomplete(searchTerm, result);
};
Solution:
I amended the custom binding handler in two places:
init: function - added the following
// New setting to allow / disallow a user to enter values that are in the autocomplete list.
forceSelection = allBindings.jqAutoForceSelection;
options change function - amended to the following
//on a change, make sure that it is a valid value or clear out the model value
options.change = function (event, ui) {
var currentValue = $(element).val();
// Start: new code, check new setting on whether to force user to make a selection
if (!forceSelection) {
writeValueToModel(currentValue);
return;
}
// End: new code
var matchingItem = ko.utils.arrayFirst(unwrap(source), function (item) {
return unwrap(inputValueProp ? item[inputValueProp] : item) === currentValue;
});
if (!matchingItem) {
writeValueToModel(null);
}
}
I also found that the first item in the autocomplete list was being automatically selected, but then noticed by setting autofocus: false solved my issue, e.g.,
<input type="text" data-bind="
jqAuto: { autoFocus: false }, /* This fixes the auto select issue */
jqAutoSource: surnames,
jqAutoQuery: surnameAutocomplete,
jqAutoValue: surname,
jqAutoForceSelection: false"
/>
If you look closely at the binding handler you're using, you will notice this section:
//on a change, make sure that it is a valid value or clear out the model value
options.change = function(event, ui) {
var currentValue = $(element).val();
var matchingItem = ko.utils.arrayFirst(unwrap(source), function(item) {
return unwrap(item[inputValueProp]) === currentValue;
});
if (!matchingItem) {
writeValueToModel(null);
}
What this section of the binding handler essentially does is check if the text the user entered into the text field matches something in the autocomplete dropdown, and if it doesn't, it clears the model value (which it sounds like what you want to change).
You can either try deleting this section or extend it to suit your purposes.
I'm using the jQuery UI Autocomplete. I'm using it on three different input. So I have:
input id 1
autocomplete with xml data 1
input id 2
autocomplete with xml data 2
input id 3
autocomplete with xml data 3
I also have an event like this:
$(".ui-autocomplete li a").live("click",function(){
doSearch($(this).text());
});
The problem is that this event takes place on all three of the autocomplete.
What do I have to change in the event code or elsewhere to bind the event to a specific input/autocomplete. So I want to have event 1, 2, 3 corresponding to the different sets of input/autocomplete.
If I understand your question correctly, you want to pass either the autocomplete element or its index to doSearch(), in addition to the item text.
Passing the autocomplete element is as simple as using closest():
function doSearch(autocomplete, itemText)
{
// ...
}
$(".ui-autocomplete li a").live("click", function() {
var $this = $(this);
doSearch($this.closest(".ui-autocomplete"), $this.text());
});
Passing its index is a little trickier and can be achieved with index():
function doSearch(autocompleteIndex, itemText)
{
// ...
}
$(".ui-autocomplete li a").live("click", function() {
var $this = $(this);
doSearch($this.closest(".ui-autocomplete").index(".ui-autocomplete"),
$this.text());
});
Note in passing that bind(), delegate() and live() have been superseded by on() since jQuery 1.7, so you might want to use it to register your handler:
$(document).on("click", ".ui-autocomplete li a", function() {
// ...
});
If your autocomplete elements have a common non-dynamic ancestor, you can also apply on() to that element instead of document to gain a little performance.