I have three fields like "Duration,Repeat,Complete Duration". User will enter the duration in time format(HH:MM:SS) and they will enter the repeat field value like "5,10,4,9,7 etc". Based on the two fields value the complete duration field should be filled.
I have tried using angular NgModel of both text fields and I multiplied the value with repeat field value. But the conversion was not happened properly.
<div>
<input type="value" [(ngModel)]="user.hrDuration">
<input type="value" [(ngModel)]="user.minDuration">
<input type="value" [(ngModel)]="user.secDuration">
</div>
<div>
<input type="value" [(ngModel)]="user.repeat">
</div>
<div>
<input type="value" [(ngModel)]="user.hrDuration*user.repeat">
<input type="value" [(ngModel)]="user.minDuration*user.repeat">
<input type="value" [(ngModel)]="user.secDuration*user.repeat">
</div>
I have tried like this, but the thing is it is directly multiplied the values, I need to convert and then it should multiply with the repeat field value.
Thanks in Advance!
You should subscribe to the input's input event so you'll know when they're changing:
<div>
<input type="value" [(ngModel)]="user.hrDuration" (input)="updateResult()">
<input type="value" [(ngModel)]="user.minDuration" (input)="updateResult()">
<input type="value" [(ngModel)]="user.secDuration" (input)="updateResult()">
</div>
<div>
<input type="value" [(ngModel)]="user.repeat" (input)="updateResult()">
</div>
<div>
<input type="text" [ngModel]="result.hrDuration">
<input type="text" [ngModel]="result.minDuration">
<input type="text" [ngModel]="result.secDuration">
</div>
and then in the Component have the listening method:
export class AppComponent {
user = {
hrDuration: 1,
minDuration: 1,
secDuration: 1,
repeat: 1
}
result = {
hrDuration: this.user.hrDuration * this.user.repeat,
minDuration: this.user.minDuration * this.user.repeat,
secDuration: this.user.secDuration * this.user.repeat
}
updateResult() {
// do your conversion here
this.result.hrDuration = this.user.hrDuration * this.user.repeat;
this.result.minDuration = this.user.minDuration * this.user.repeat;
this.result.secDuration = this.user.secDuration * this.user.repeat;
}
}
Here is a working stackblitz: https://stackblitz.com/edit/angular-2aukww
I think you should use an onchange event listener and a function that returns the result:
HTML:
<div>
<input type="value" [ngModel]="user.hours" (ngModelChange)="getResult()">
<input type="value" [ngModel]="user.minutes" (ngModelChange)="getResult()">
<input type="value" [ngModel]="user.seconds" (ngModelChange)="getResult()">
</div>
<div>
<input type="value" [ngModel]="user.repeat" (ngModelChange)="getResult()">
</div>
<div>
<input type="value" (ngModel)="user.result" readonly>
</div>
JS:
function getResult() {
if (isNaN($scope.user.hours) ||
isNaN($scope.user.minutes) ||
isNaN($scope.user.seconds) ||
isNaN($scope.user.repeat)) return $scope.user.result = "";
var total = ($scope.user.hours*60*60 + $scope.user.minutes*60 + $scope.user.seconds) * $scope.user.repeat;
var hh = Math.floor(total / (60*60));
if ( hh < 10 ) hh = '0' + hh;
var diff = total % (60*60);
var mm = Math.floor(diff / 60);
if ( mm < 10 ) mm = '0' + mm;
var ss = Math.floor(diff % 60);
if ( ss < 10 ) ss = '0' + ss;
$scope.user.result = hh + ':' + mm+ ':' + ss;
// of course you could also output something like
// 'X hours, Y minutes, Z seconds'
}
Showing the result as a single value will show more clearly the final value, since multiplying each variable (hours, minutes and seconds) by the repeats would be less intuitive.
Related
I'm trying to change link the times input. When I choose a hour in the eventStartTime, I would like to fill, depend of a time passing through the minutesToHours function (in minutes), the eventEndTime (an addition : the eventStartTime + the minutes I've added)
I have tried to do it by myself, but i didn't get any results :
$( document ).ready(function() {
$('#eventStart').on('input', function () {
var convertDuration = minuteToHours(6);
$('#eventEnd').val($(this).val() + moment(convertDuration).format('HH:mm'));
});
});
function minuteToHours(num) {
var hours = Math.floor(num / 60);
var minutes = num % 60;
return hours + ":" + minutes;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-4">
<div class="form-group">
<label class="form-label" for="eventStart">Heure début</label>
<input class="form-control" id="eventStart" type="time">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="form-label" for="eventEnd">Heure Fin</label>
<input class="form-control" id="eventEnd" type="time">
</div>
</div>
Thanks for your help !
I'm making a page to easily calculate when I could go home from work. The page should set a start date when loaded. That way I don't have to know when I started working and just open my browser. Then by clicking one of the buttons it should just add some hours.
The example is one of the many things I've tried already. But this one is close I think. Any suggestions are welcome. I didn't include jquery because of the small scale this has.
function reset() {
var date = new Date();
var hour = date.getHours(),
min = date.getMinutes();
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
var timestamp = hour + ":" + min;
document.getElementById("start_time").value = timestamp;
}
function add_time_76() {
var start = document.getElementById("start_time").value;
document.getElementById("end_time").value = start + 7, 6;
}
function getTotal() {
var start = document.getElementById("start_time").value;
var end = document.getElementById("end_time").value;
document.getElementById("total").value = end - start;
}
<body onload="reset()">
<p>Start time: <input name="start_time" type="time" /></p>
<p>Time to go home: <input name="end_time" type="time" /></p>
<p>Total hours: <input type="text" name="total" readonly></p>
<button onclick="add_time_76()">Add 7,6h</button>
<button onclick="add_time_8()">Add 8h</button>
<br><br>
<button onclick="getTotal()">Calculate Total</button>
<br><br>
<button onclick="reset()">Reset</button>
</body>
The time fields aren't getting populated when I want them to be.
Just add a id to your inputs.
<p>Start time: <input id="start_time" name="start_time" type="time" /></p>
<p>Time to go home: <input id="end_time" name="end_time" type="time" /></p>
<p>Total hours: <input id="total" type="text" name="total" readonly></p>
Here three time zone range input pakistan, afghanistan and india
here time zone offset in seconds
location offset seconds
pakistan 18000
afghanistan 16200
indian 19800
input range 1 to 24 hour
when I click on any input the range displays all time according to their time zone.
But the problem is when I click on the afghanistan or india input time range it returns wrong time.
when when I click end the input range (mean 24 hour) it return 30 minute behind from the original value
$("#comission div").on("click", "input", function() {
var value = parseInt($(this).val())
var hours1 = Math.floor(value / 60);
var minutes1 = value - (hours1 * 60);
var targetTime = new Date(0);
targetTime.setMinutes(minutes1);
targetTime.setHours(hours1);
if (value > 1430) {
targetTime.setMinutes(59);
targetTime.setHours(23)
}
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
$('#comission .time').each(function() {
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
var tzDifference = (parseInt(timeZoneFromDB) / 60) + targetTime.getTimezoneOffset();
var date = new Date(targetTime.getTime() + tzDifference * 60000);
var totallv = parseInt(date.getHours() * 60) + date.getMinutes();
$(this).find('.tooltip').css('margin-left', totallv / 3);
$(this).find('.tooltip').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.comissionLabel').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.custom-range').val(totallv)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<br><br><br> <br><br><br>
<div id="comission" class="col-md-6 col-md-offset-2">
<div class="col-md-12 mb-3 44 time">afghanistan
<span class="comissionLabel" data-offset='16200'>time: </span>
<input class="custom-range" value="60" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 45 time"> Pakistan
<span class="comissionLabel" data-offset='18000'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 46 time">indian
<span class="comissionLabel" data-offset='19800'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
</div>
</div>
I have a loan calculator that I have built using JQuery, HTML, and CSS. It functions ok. The weird thing is I have to refresh the page in order to get it to calculate correctly. I'm not sure what I'm doing (or not doing) correctly. Would love some feedback.
$(document).ready(function() {
// variables
var amount = $('#loanAmount').val();
var yearlyInterestRate = .12;
var monthlyInterestRate = yearlyInterestRate / 12;
var twelveMon = 12;
var eighteenMon = 18;
var twentyFourMon = 24;
var duration = $('input[name=duration]:checked').val();
var calcButton = $('.calculate');
var resetButton = $('.reset');
var monthPay;
$('.results').addClass('hidden');
// Calculate Monthly Payment
calcButton.click(function(event) {
event.preventDefault();
monthPay = (monthlyInterestRate * amount) / [1 - Math.pow((1 + monthlyInterestRate), -duration)];
$('.durationValue').text(duration);
$('.monthlyPayment').text(Math.round(monthPay));
$('.results').removeClass('hidden');
});
resetButton.click(function() {
$(form).reset();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="loan-calc">
<form id="calculator">
<input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br>
<label>Choose your payment duration:</label><br>
<input type="radio" name="duration" value="12" class="duration"> 12 Months<br>
<input type="radio" name="duration" value="18" class="duration"> 18 Months<br>
<input type="radio" name="duration" value="24" class="duration"> 24 Months <br>
<button class="calculate">Calculate</button>
<!-- <button class="rest">Reset</button>-->
</form>
<p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p>
</section>
You're setting values on document.ready() - so it's even before any of examples in radio will be clicked. Move getting you values into the .click() function
And it's even more efficient to switch from deprecated .click() method to .on('click', function(){}) just in case you'll expand your form in the future
You need to put the vars inside the function that uses them
PS: In a form an input type="reset" /> will reset the form without needing script
$(document).ready(function() {
$('.results').addClass('hidden');
var yearlyInterestRate = .12;
var monthlyInterestRate = yearlyInterestRate / 12;
var twelveMon = 12;
var eighteenMon = 18;
var twentyFourMon = 24;
// Calculate Monthly Payment
$('.calculate').on("click", function(event) {
event.preventDefault();
var amount = $('#loanAmount').val();
var duration = $('input[name=duration]:checked').val();
var monthPay = (monthlyInterestRate * amount) / [1 - Math.pow((1 + monthlyInterestRate), -duration)];
$('.durationValue').text(duration);
$('.monthlyPayment').text(Math.round(monthPay));
$('.results').removeClass('hidden');
});
$('.reset').on("click", function() {
$(form).reset();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="loan-calc">
<form id="calculator">
<input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br>
<label>Choose your payment duration:</label><br>
<input type="radio" name="duration" value="12" class="duration"> 12 Months<br>
<input type="radio" name="duration" value="18" class="duration"> 18 Months<br>
<input type="radio" name="duration" value="24" class="duration"> 24 Months <br>
<button class="calculate">Calculate</button>
<!-- <button class="rest">Reset</button>-->
</form>
<p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p>
</section>
you take the values of duration and amount on pageload (document ready). if you update the values by filling them in, the variables won't get updated.
move var amount = $('#loanAmount').val(); and var duration = $('input[name=duration]:checked').val(); into the 'onClick' handler so that the amount and duration get updated once you click.
I have two input fields representing hours and minutes.
<input type="number" min="0" max="24" step="1" value="00" class="hours">
<input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes">
Which display as:
0:0
Or:
5:3
Is there a way to display it as:
00:00
Or:
05:03
i.e in 24-hour data format (before people suggest it, I can't use type="time").
You can add an onchange attribute to your input tag, which calls a javascript function.
<script>
function myFunction() {
var minuteValue = document.getElementById("minutes").value;
if (minuteValue.length < 2) {
minuteValue = "0" + minuteValue;
}
alert(minuteValue);
}
</script>
<input id="minutes" onchange="myFunction()"/>
function formatNums(num){
if (nums < 10){
return "0" + num;
}
}
var formattedHours = formatNums(hours);
var formattedMinutes = formatNums(minutes);
NOTE: This method uses type="text" so be sure to convert back to a number if needed. Number(formattedHours);
Add a leading zero with a JavaScript function.
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
function addLeadingZero(value) {
return value.length < 2 ? "0" + value : value;
}
hours.addEventListener("input", function() {
hours.value = addLeadingZero(hours.value);
});
minutes.addEventListener("input", function() {
minutes.value = addLeadingZero(minutes.value);
});
<input type="number" min="0" max="24" value="00" id="hours" class="hours">
<input type="number" min="0" max="59" value="00" id="minutes" class="minutes">
simple is the best
`${number}`.padStart(2, '0')