Activating a JQuery UI datepicker via remote Button - javascript

I'm using the JQuery UI datepicker, but instead of attaching the datepicker to an input[type=text] element, i'm attaching it to an input[type=hidden] element. In order to activate the datepicker, I'm using a remote button on the UI that's not a sibling of the input element the datepicker is attached to.
In order to show the datepicker, I'm using a click event handler which executes this code
$('input.trial_end_date').datepicker('show');
This works to show the datepicker, but whenever I click a date, I get an uncaught javascript exception:
Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6
t.selectDay jquery-ui-1.10.1.custom.min.js:6
v.event.dispatch localhost.local/:5
o.handle.u localhost.local/:5
However, if I change the input[type=hidden] to an input[type=text] to allow the datepicker to show when the input element is focused, all click events fire without any problems (until I activate the datepicker via the button, then they all fail no matter which way the datepicker is activated).
Is there a more reliable way to activate the date picker via a remote button and hide the input element for the date? I'm not sure why this exception is being thrown at all.
Here's an example of this not working in a JSFiddle. Though, the exception isn't the same. After further research, I seem to have found the reason, which I'll add in an answer below.

Why would you use a hidden input when you can instantiate a datepicker on a regular div and just hide and show that div? If you don't need the input, don't use it.
<input type="button" id="open" />
<div id="datepicker"></div>
JS
$('#datepicker').datepicker();
$('#open').on('click', function() {
$('#datepicker').toggle();
});
FIDDLE

After messing around with this problem a bit in a JSFiddle, (http://jsfiddle.net/XJ7Z7/1/), it's apparent that if you attach the datepicker to an input element - the input element must be visible (ie, not a hidden element).
The reason for this is because the Datepicker module tries to position the calendar via position:absolute; and to do so accurately needs to get the top/left offset for the input element to which it is attached. A hidden input element has no top/left offset (it's set to 0/0), so therefore the module skips that element to try to find one that is visible that it can use to calculate where to place the calendar.
If there's no sibling element that can be used the reference object gets set to null and an exception is thrown when the datepicker tries to access the left/top properties of the return object of $(el).offset() because the call to offset returns a null value.
The solution here is outlined by #adeneo in the accepted answer, but the sacrifice is that you'll have to manage your hidden input value for the selected date on your own via the onSelect callback of the datepicker module initialization.
I hope this helps someone out there who is running into a similar problem.

Related

Using ng-model-options updateOn:blur with uib-datepicker popup

I have an input that allows a user to either type or select a date via the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input the datepicker pops-up allowing a user to make a selection Here is the input:
<input
datepicker-append-to-body="calendarCtrl.appendToBody"
uib-datepicker-popup="calendarCtrl.dateFormat"
ng-model="calendarCtrl.ngModel"
ng-click="calendarCtrl.open"/>
I need to allow the option for the user to not update the ng-model until the user has blurred the input. To do that I am trying to use ng-model-options.
ng-model-options={updateOn: 'blur'}
This works great for when a user types a date into the input - the ngModel is not updated until a blur occurs and any validation isn't ran until blur. The problem is it breaks the functionality of the calendar popup in that nothing happens when a user then clicks on the open calendar to select a date. I'm assuming because when the user clicks on the calendar essentially a blur event is occurring on the input??
Has anyone came across this problem? Is there an ng-model-options option or something within the datepicker that would allow the user to still make a selection from the datepicker but not update the ng-model until a blur occurred on the input?
Thanks
Sounds like you could use a temporary property ng-model="calendarCtrl.tempSelectedDate" for ngModel in the Date Picker.
Then use the ngBlur event (https://docs.angularjs.org/api/ng/directive/ngBlur) to update the real property ie. set calendarCtrl.ngModel = calendarCtrl.tempSelectedDate.
Also, while nothing stops you using the scope property calendarCtrl.ngModel in ngModel, the code will be easier to read if you use more meaningful names like ng-model="calendarCtrl.dateSelected".
Here's a working demo http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview.
I forked and expanded someone else's datepicker plnkr with two changes: adding ng-blur="blurDate = startDate" to the <input> & displaying the value with Blur Date: {{ blurDate }}.

How to test datepicker with capybara

anyone know how to create a callback on html input's value change, or someone know how to test clicking on jquery ui datepicker and timepicker? I have tried, onchange does not work == , the value I'm talking about is the value HTML attribute of the input element, and the element is a readonly element. I'm facing this problem because I'm setting the value of the element for capybara testing with execute script running jQuery and the date input is a react component, datepicker function mounted on to the element on oncomponentdidmounted callback, with datepicker function's onSelect callback changing the state of the page. I have tried to use xpath to click but that also does not work accordingly. I have tried page.execute_script aswell but it does not help.
page.execute_script("$($('.start-datepicker.hasDatepicker')[0]).val('23/11/2016');")
page.execute_script("$($('.start-timepicker.hasTimepicker')[0]).val('07:25 AM');")
page.execute_script("$($('.end-datepicker.hasDatepicker')[0]).val('24/11/2016');")
page.execute_script("$($('.end-timepicker.hasTimepicker')[0]).val('08:25 AM');")
I have more than 1 date picker on one page.

What method to use to fire an event after datetime is selected using datetime selector UI?

I came across a datatimepicker plugin
I am trying to use it in a small app that I am working on. I need to be able to enable a button after a user selects data from the picker.
What method would use to trigger some logic after the datetime was selected
You could bind an event to your form input element to fire when it changes.
('#date').datetimepicker({
...
onChangeDateTime: function(dp,$input){
alert($input.val())
}
...
});
Within the handler function you will probably want to implement some kind check to ensure that the value is what you want it to be before enabling the button.

Dropdown form field

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

jquery-ui datepicker with showOn: button showed even if source input is disabled

I have an input text field with a datepicker instance from jquery-ui with the following parameters:
'buttonImageOnly': true,
'showOn': 'button',
'buttonImage': 'gfx/calendar.gif'
It works well. When I click the "calendar.gif" datepicker image, the calendar is shown. However, when I select a date, the input field (which was disabled) is changed.
Is this a bug or am I doing something wrong? When I look at the instance object in Firebug, the disabled parameter is set to true.
Disabled mean you can't manually write in it. But you still can with javascript.
The textbox is where it saves the date value. If you don't want it to show, turn it to a hidden field or hide it with CSS (easier).
The buttonImageOnly is about using a button with an image type or just an image.
I don't see any bug nor error from your part. :)
If you don't care that the image will no longer show, try the following:
$('#myfield:not([disabled])').datepicker();

Categories

Resources