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');
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.
For the JqueryUI tag-it widget, I'd like to completely prevent the new extra text entry field from appearing. I'm pre-populating with existing tags, and I'd just like to allow people to delete tags but not enter them.
I can make the new field read-only, but the field remains visible in IE and in both IE and Firefox clicking in the area of the widget causes the cursor to focus on that field.
What I'd like to do is get rid of the extra input field altogether.
There doesn't seem to be a tagit property for this associated with the .tagit() method. Is there something else I can do to prevent the extra field from being created?
Thanks,
doug
Try this:
$('#tagit').tagit({
//options
}).ready(function() {
$(this).find('.tagit-new').css('height', '13px').empty();
});
Using firebug we can see that the input field created by tagit is in a li element with class tagit-new. We need to set the height otherwise the tag container will squash to a slither when the last tag is deleted, and then we can empty() this to get rid of the tag input field.
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.
I have a simple datepicker I'm using on a couple of date inputs. Here's the code:
$('input.isDate').datepicker({
numberOfMonths: 1,
onSelect: function () {
$(this).removeClass('placeholder'); //default is to keep placeholder style format
},
onClose: function () {
$(this).focus(); //otherwise focus goes to neverneverland
}
});
Datepicker shows on focus. The two .isDate inputs have a placeholder value of "Date".
The problem arises if the user presses the escape key when in the datepicker. The intended behavior of this is to close the datepicker and restore whatever text was in the box at point of entry. In my case the input box's value becomes the placeholder value. Leaving the box at this point leaves the word "Date" in the box as a hard value rather than as a placeholder prompt, so it trips some field-level date validation that I have.
I've been able to deal with that by blanking the text value when the user leaves the box, but the user oughtn't to have to erase that text when he escapes out of the datepicker to enter a date manually. I've made numerous attempts to use events to get rid of this, and none of them work: I've tried focusin, trapping esc in keypress, and the create, beforeDisplay, onSelect and onClose events of the datepicker itself. In all these cases, the value of the box was still "". Clearly, the datepicker sets the value of the box after finishing all of its business, and I'm thinking that placeholder wasn't taken into account in this design. Possibly a bug? We're using the Whitelabel skin, so maybe they are interfering with the datepicker in some way? Anyway, I'd much appreciate a workaround or an explanation. I haven't been able to find much of either.
TIA
Without knowing more about your application, I think you'd be better off using a good label and leaving the input blank. There is also an actual placeholder feature in "HTML5".
I am working on MVC with C#.
I have 2 radio buttons. On selecting first radio button, a textbox will be shown which allows to enter date values.
<%= Html.TextBox("ReceivedDate")%>
on selecting the second radio button, the textbox gets hidden.
For the first time, when i select first radio button and entered date and clicked Next to navigate to next page and came back to this page again and clicked second radio button and clicked Next to continue and again i came back to this page and without changing any option click continue, its not allowing to navigate and shows an error.
A value is required.
Which means the ModelState validating the hidden controls also.
Please suggest how to control it
Instead of hiding it remove the element from the DOM and reinsert it if the first item is selected again. Another way would be to change the name of the input control to something else (a key not present in your model data) when the first item is not selected.
Validating hidden input types is a good thing, i often use them to synchronize data from complex controls (like a treeview with checkboxes). An input type with a hidden css style doesn't make it not submit with the form it belongs too.