How to input hours and minute in angular js ? - javascript

This is code
<input type="number" class="form-control" min="0" max="12" step="1" ng-model="input.hours" required>
<input type="number" class="form-control" min="0" max="60" step="5" ng-model="input.minute" required>
This is browser preview
I need to input hours as 08 and minutes 05 But visible 8 and 5.
How can do that?
If not clear, comment. Hope answer soon.

You can use ng-change to insert a 0 before the value each time it changes:
<input type="number" class="form-control" min="0" max="12" step="1" ng-model="input.hours" required ng-change="onChange(input.hours)">
<input type="number" class="form-control" min="0" max="60" step="5" ng-model="input.minute" required ng-change="onChange(input.minute)>
$scope.onChange = function(val) {
if (val < 10) {
val = '0' + val;
}
}

I would suggest to create a filter to add '0' before number if needed
https://stackoverflow.com/a/17648547/274500

Related

How to check if value starts with and ends with either of 2 options using Javascript?

I have this current if statement - which is inside a for loop:
// Validate Temperatures
if(inputs[i].name.startsWith("actual-temp") || inputs[i].name.startsWith("min-temp") || inputs[i].name.startsWith("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
What it does
Checks all inputs that has name starting with actual-temp, min-temp and max-temp and passes them into a function called validate
My HTML file
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="max-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="actual-temp-1">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="max-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-2">
<input type="number" name="min-temp-1">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="actual-temp-2">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="max-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="min-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
<input type="number" name="actual-temp-3">
Question
Within my if statement - how can I grab all elements that startsWith() (as it is in the if statement currently) and ends with either -1 or -2? Or alternatively exclude inputs names that end with -3.
You can use regular expressions for your test
if (inputs[i].name.match(/^(actual|min|max)-temp-(1|2)$/)) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
Use str.includes
if(inputs[i].name.includes("actual-temp") || inputs[i].name.includes("min-temp") || inputs[i].name.includes("max-temp")) {
validate(parseFloat(inputs[i].value), inputs[i], e);
}
for (let item of my_list) {
if (item.charAt(item.length-1)!=="3"&&
(item.startsWith("actual-temp")|| item.startsWith("min-temp")||
item.startsWith("max-temp"))
) {
//logic goes here
}
}
when the first condition in the above if loop fails , javascript will not check the 3 items in OR statements (short circuiting comes into picture)

How to only accept specific input

html text input only 0 or 2 or 4 or 6 or 8 or 10 only.otherwise a blank space should be returned
function isNumberKey(evt) {
var regexExp = /[2,4,6,8]{1}|10/
return (regexExp.test(($('#evt').val())) ? evt ').val() : false);
}
<input type="text" name="T2" id="d1" size="5" maxlength="2" min=0 max=10 step="2" Onkeypress="return isNumberKey(this.value)">
Based on what I understood, I think this is what you are looking for.
exception being that the input value of "1" is valid.
<input type="number" min="0" max="10" value="0" step="2" onkeypress=" let satisfy = (/^(0|2|4|6|8|1|10)$/).test(this.value + event.key); if(!satisfy){this.value = ''} return satisfy;">

Placeholder display if value = 0

is it possible to still display the placeholder text IF the value is equal to the minimum value?
For this code
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>
Can this be done with just html5? Or would this manipulation really have to be done with javascript?
Thanks!
I believe some manipulation is needed here is a javascript solution
If the user clicks on the input box and the min value is current, then it adds the placeholder.
If the user key in the value, it triggers a click
function func(e) {
if(e.target.value==e.target.getAttribute("min")){
e.target.value="";
}
}
document.getElementById("spreadThisTotal").addEventListener('click', func);
document.getElementById("spreadThisTotal").addEventListener('keyup', function(e){e.target.click()})
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated" />
Try with below solution:
document.getElementById('spreadThisTotal').addEventListener('keyup', checkValue);
function checkValue(event){
if(event.target.value == 0){
document.getElementById('spreadThisTotal').value = null;
}
}
<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>

Is it possible to link a Range and a Numerical HTML input?

Is there a way to link the values of a <input type="range"> and an <input type="number">?
I would like to make changes to either the slider or to the numerical input and have both fields be updated. For some reason I have only been able to get an undefined value from the range element as of yet.
Here is my current JavaScript and HTML for this part of the document:
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
It's not working because updateTextInput1(this.val) should be updateTextInput1(this.value):
function updateTextInput1(val) {
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
However, I'd suggest using unobtrusive JavaScript, though.
Just attach an input event to each element. In doing so, both elements will be in sync.
var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');
range.addEventListener('input', function (e) {
field.value = e.target.value;
});
field.addEventListener('input', function (e) {
range.value = e.target.value;
});
<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
Or you could use a more compact approach and select the sibling element:
document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);
function updateValue (e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
To display everytime the range or input text is changing you can use oninput and onchange on the input range, and also onkeypress and onchange on the input type text :
function updateTextInput1(val) {
val = val > 100 ? 100 : val;
val = val < 0 ? 0 : val;
document.getElementById('range').value = val;
document.getElementById('num1').value = val;
}
<input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
The error is: this.val instead of this.value
function updateTextInput1(val) {
alert(val);
document.getElementById('num1').value = val;
}
<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />
You should bind event using js/jq. And to link both, you could target specific sibling element (or any other relevant transversal method):
$('.inputRange, .inputNumber').on('input', function(){
$(this).siblings('.inputRange, .inputNumber').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Change html numeric min and max with javascript

changeI have two numeric inputs and would like to limit the max or min of the second one based on the changes of the first one. So....
<input id="input1" type="number" min="0" max="10" value="5" change="OnChangeNumeric()" >
<input id="input2" type="number" min="0" max="10" value="1" >
<script>
function OnChangeNumeric() {
//how to actually change the values is where i am stuck
$('#input2').max = 5;
}
</script>
how to actually change the values is where i am stuck
Thanks for your suggestions
$(function() {
$('#input1').on('change',function() {
var thisVal = this.value;
/*calculate newMin, and newMax for #input2 according to your rules
based on thisVal ........
$('#input2').attr('min', newMin).attr('max', newMax);*/
console.log( $('#input2')[0] );
});
});
No need for inline JS:
<input id="input1" type="number" min="0" max="10" value="5"/>
<input id="input2" type="number" min="0" max="10" value="1"/>
JS FIDDLE DEMO

Categories

Resources