I'm using a datepicker, which is always visible on the page, and tied to a hidden <input>.
Depending on the user interactions on the page, some dates can get dynamically disabled (via beforeShowDay).
The problem is, this allows to disable a date which has been previously selected:
To avoid this, I'd like to unselect the current date prior to refreshing the datepicker.
Is this possible?
EDIT: The datepicker is attached to a div. Clear the selected value like this:
$('selector').datepicker('setDate')
This will unselect whatever day is selected.
Related
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
I display two dates in a input-field. When the user clicks on a valid date, mobiscroll should display the date and allow it to be changed.
When the user sets the cursor outside one of the dates (by clicking just before or after one of the dates), the input field should work as expected, allowing the user to change the date in-place or typing something.
Mobiscroll is initialized with:
$('#input').mobiscroll().date({
showOnTap: false,
showOnFocus: false
});
and then invoked with
$('#input').mobiscroll('setDate', theClickedDate, false);
$('#input').mobiscroll('option', {onSelect: dateChanged});
$('#input').mobiscroll('show');
when the "circumstances" are right (i.e. a valid date clicked).
This works when a date is clicked, mobiscroll is displayed with the date. But a click "outside" one of the dates does not set the cursor to allow editing. The input acts like it is 'readonly'.
Pasted from Mobiscroll support team:
Mobiscroll sets the input field to readonly, because otherwise, when it receives focus, the virtual keyboard will also pop up.
I think the best solution would be to not initialize mobiscroll on the input field (as you are not using the show and fill functionality anyway), you can initialize it on an empty div.
If you use bubble positioning, you should also pass the input element in the anchor setting:
$('#mydiv').mobiscroll().date({
display: 'bubble',
anchor: $('#input')
});
$('#mydiv').mobiscroll('setDate', theClickedDate, false);
$('#mydiv').mobiscroll('option', {onSelect: dateChanged});
$('#mydiv').mobiscroll('show');
I have to pick mulitple dates from single date picker into multiple select box.
And also i have to remove selected date from multiple select box when remove button is clicked.
There are so many plugins but i have to use jquery ui datepicker.
As example I have something like this
you can use multidatespicker http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/ which allows you to pick multiple dates.
that solves your problem of selecting multiple dates using one datepicker although i am not sure about the insertion of date in multiselect field. will update the answer as soon as i get it done.
The contents of the datepicker input is changed programmatically via "setDate" method and I want to update the preview of the input form depending on the changed date value.
The "onSelect" event is triggered only when the date is changed through the datepicker UI and not when "setDate" is called.
"onChange" event of the input is also not triggered.
Right now it seems the only way is to call my updatePreview function manually every time after the "setDate" and I have to re-format the date object I get from the "getDate" method.
Is there an easier way to do it?
Here's the mockup in jsFiddle. The "change programmatically" button doesn't update the preview.
If I am understanding correctly, you want to update a separate element with the date being entered or set programmatically. If so, updating an alternate field preview is baked into jQuery UI Datepicker already.
The datepicker widget only seems to be able to update an alternate <input> field rather than a <div> preview though, so if you need it to update a <div> then this demo will require a bit more work.
You could trigger the event yourself, but in general setting values in javascript does not trigger events. This goes for jQuery too.
Firing the events yourself:
$(elem).select(); // for select obviously
$(elem).change(); // for change
JQuery UI Tabs remembers the current selected tab when we navigate from the current page and come back to the previous one (use anchor links for such page transfer) Is there any way I could disable the feature that makes the tabs to remember their current position? I checked the JQueryUI documentation for tabs but could not find where it sets the cookie to accomplish this. Any insight would be helpful.
Thanks in advance.
The default tabs() implementation certainly doesn't do it. But are you sure the cookie option is null? Otherwise it might be the selected option. The documentation mentions:
Cookie:
Store the latest selected tab in a
cookie. The cookie is then used to
determine the initially selected tab
if the selected option is not defined
Selected:
Zero-based index of the tab to be
selected on initialization. To set all
tabs to unselected pass -1 as value.