I'm using uib-datepicker-popup fairly heavily in my application. It has worked perfectly until this specific instance.
I am using it exactly the same as I have in every other instance of my application, but it only half works.
The "Today", "Clear" and "Done" buttons in the bottom bar work as expected (hitting "today" puts the date in the input and hides the calendar, "clear" clears the input and hides the calendar, "done" hides the calendar).
However, when I select any date/day on the calendar it highlights it, but the date does not populate in the input and the calendar remains open.
Here's my html:
<input type="text" class="form-control" name="convert_date" uib-datepicker-popup="M/d/yyyy" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
Any ideas why the date buttons won't populate the input?
ngModelOptions was the culprit here. I had it set for the entire view in this area of my application as follows:
ng-model-options="{ updateOn: 'blur click', debounce: {'blur': 0, 'click': 0} }"
This prevented the day/date buttons from being able to fire their events and populate the input and hide the calendar.
I resolved my problem by adding another instance of ngModelOptions directly as an attribute to my uib-datepicker-popup element like so:
<input ng-model-options="{ updateOn: 'default' }" name="convert_date" uib-datepicker-popup="M/d/yyyy" type="text" class="form-control" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
This reset the model behavior to the default settings, so that the datepicker could function properly again.
What I want to do here is that when my checkbox 'chBeamer' is checked the images of the beamers should appear if their beamername is not '/' (/ means that their is no beamer registrated)
checkbox
<input ng-model="chBeamer" type="checkbox" id="chBeamer" name="chBeamer"/>
ng-show
<div ng-show="chBeamer"><img id="beamer" src="../app/img/beamer.png"/></div>
I don't know how to start with this, I tried with a filter and condition (chBeamer !== '/') but this didn't work...
From your post I can't quite understand where beamername is coming from, but you can do:
<div ng-show="chBeamer && beamername !== '/'">...</div>
But I feel like this is part of a bigger picture, e.g. there must be multiple items? What does your underlying model look like?
I created a simple Jquery slider:
<div id="slider"></div>
and attach one text input field to the slider handler by using Javascript:
$( "#slider" ).slider();
var value = "<input id='handler1InputValue' type = 'text' spellcheck = 'false' style='position:absolute;width:70px;height:15px;text-align:center;left:-2px;font-size:10px;display:block;' ></input>";
$( ".ui-slider-handle" ).html(value);
$( ".ui-slider-handle" ).unbind();
$( "#handler1InputValue" ).val(77777);
But in Firefox, the cursor does not follow mouse click in the text input field, mouse selection doesn't work as well, while everything works in Chrome side.
Anybody know how to solve the problem in Firefox side? And you can try the test sample here: slider with text input field
I would like to make a tooltip that will respond to the keys (left / right). How do I add an event in a similar way:
$.jqplot.eventListenerHooks.push(['jqplotClick', handleClick]);
I need to get the 'plot' object in event.
You might want to start by checking out one of my other answers and see the code sample there. It presents a way of listening for keyboard events.
It comes down to the following code:
$(document).keydown(function(e) {
if (e.keyCode == 37) {
//on left arrow key down
}
else if (e.keyCode == 39) {
//on right arrow key down
}
});
Remember that to have the sample respond to keys the 'Result' area on the jsfiddle must be selected.
Personally, for the tooltip I would use a custom one, to have a better control over it. How to do it is, for example, presented in this answer.
I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
I was working on a very simple feature:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
Firefox ... not so much. It acts as if I had a "text" type.
Is that a known issue? Workaround?
Thanks
First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
This page has details on HTML5 forms and the current bugs
https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.
Is that a known issue?
Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)
Workaround?
JavaScript
input type="number" is not implemented in Firefox yet as of version 25 (November 2013).
Bug 344616 is the relevant ticket in Bugzilla#Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Update 10 March 2014 - Good news! Looks like the ticket was fixed in Firefox 29, scheduled for release on 29 April 2014.
Update 30 April 2014 - Confirmed, I just gave it a try, and Firefox 29 has support for input type="number".
No browser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.
Opera will show you an UI letting you click arrows up and down to increase or decrease the number.
You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.
Chrome has no UI for the number yet, thus there is no help or no visual hint that a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.
You are using the :invalid pseudo-class to make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.
Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.
i am using firefox, i had the same issue developing my input type number typing caracters and spaces etc...
anyway i m using angular 2 in this examples, its almost similar to javascript, so you can use this code in every case :
here is the html :
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
here is the function FilterInput :
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
in this function i had to just let the keypress of numbers, direction, deletes enter, so this function is just for the positive integer not doubles.
Firefox has supported patterns since 4.0
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
(For help, see http://html5pattern.com/)