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

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 }}.

Related

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.

Validating text input - bug in implementation

I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.
Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.
You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.

AngularUI Bootstrap Datepicker date deselection

I'm using the UI-Bootstrap Datepicker inline for date selection, as shown below.
<datepicker ng-model="profile.available_from" show-weeks="true"></datepicker>
I would like to enable the user to deselect the currently selected date by clicking the same date again.
Eg. the user clicks 29 May 2015, the corresponding tile is highlighted and profile.available_from is updated with the value. If the user now clicks that same date again, the selection highlight should be removed and profile.available_from is set to undefined/null.
Any ideas?
I guess this is not possible without modifying the original source code of datepicker.
It would have to check if the field already has the selected value, and if yes, then clear it. Which would complicate the code with no obvious benefit.
I would add clear button instead.
example code (taken from http://angular-ui.github.io/bootstrap/#/datepicker)
$scope.clear = function () {
$scope.profile.available_from = null;
};

Activating a JQuery UI datepicker via remote Button

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.

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