in angular js - how get current time on button click - javascript

I have two buttons like in and out, i need to show current time .. once clicked any button i need to send current time and date
<label>Today's Date : {{currentdate}}</label>
<label>Current Time : {{currenttime}}</label>
<button type="submit" class="btn" ng-disabled="disabledin" value="in" ng-
click="submitFun($event)">IN</button>
<button type="button" class="btn" ng-disabled="disabledout" value="out"
ng-click="submitFun($event)">OUT</button>

You are looking for something like this:
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.someFunction = function() {
$scope.date = new Date();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<pre>current date: {{date | date: 'dd/MM/yyyy'}}</pre>
<pre>time: {{date | date: 'HH:mm:ss'}}</pre>
<button ng-click="someFunction()">show date time</button>
</body>

what about var time = new Date().

(function () {
function checkTime(i) {
return (i < 10) ? "0" + i : i;
}
function startTime() {
var today = new Date(),
$scope.currentdate = today;
h = checkTime(today.getHours()),
m = checkTime(today.getMinutes()),
s = checkTime(today.getSeconds());
$scope.currenttime = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
startTime();
})();

In your controller you can use:
$scope.submitFun($event){
$scope.currentDate = new Date();
$scope.currentTime = new Date().getTime();
}
And you can change date format with filter in your html:
<label>Today's Date : {{currentdate | date:'yyyy-MM-dd HH:mm:ss Z'}}</label>
Read some DOC

Related

Dynamic date Caluculation in Java script

I Am having two dataPickers of dijit/form/DateTextBox. One for startdate and another one for Enddate.
I want to check whether "Enddate > startdate+ 90days 3month)", if yes then I need to reset the end-date with startdate+ 90days.
format which am getting from DateTextBox 2018-04-25. Please help on this
var fromDate=digit.byId('startDate');
if(fromDate!=null) {
var fromtimestamp=new Date(digit.byId('startDate')).getTime();
var endtimestamp=new Date(digit.byId('endDate')).getTime();
var timestamp= new Date(digit.byId('startDate')).getTime+ (30 *24*60*60*1000);
if(endtimestamp>timestamp) {
// wants to reset with startdate+ 90days
}
}
You can achieve this but using dateBox min constaraint setting a change event in your start date , then set the digit.byId('endDate').constraints.min start date + 90
as :
digit.byId('startDate').on("change",function() {
var end = new Date(this.value);
end.setDate(end.getDate() + 90);
digit.byId('endDate').constraints.min = end;
})
See below programmatic snippet :
require(["dijit/form/DateTextBox", "dijit/form/Button","dojo/on" ,
"dojo/domReady!"
], function(DateTextBox,Button, On ) {
var startdate = new DateTextBox({
constraints:{
datePattern:'yyyy-MM-dd'
}
}, "startDate");
var enddate = new DateTextBox({
constraints:{
datePattern:'yyyy-MM-dd'
}
}, "endDate");
startdate.on("change",function() {
var end = new Date(this.value);
end.setDate(end.getDate() + 90);
enddate.constraints.max = end;
enddate.constraints.min = new Date(this.value);
})
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
start :<div id="startDate" ></div>
end : <div id="endDate" ></div>
</body>

Moment JS - Adds two days

Here is my current MomentJS code:
var date = moment($scope.dt);
for (var i = 0; i < parseInt($scope.numPagos); i++) {
$scope.resultados.push({
'numerodecuota' : i + 1,
'fechas' : date.add(1, 'days').format("MM/DD/YYYY"),
'pagos' : Math.round($scope.importeprestamo / $scope.numPagos + interes),
'interes' : Math.round(interes),
'capital' : $scope.importeprestamo / $scope.numPagos,
'fechaunix' : date.add(1, 'days').unix()
});
}// End for loop
And this is the result:
It has to be:
01/12/2017
01/13/2017
01/14/2017
01/15/2017
And so on.
Note: It should be noted that moments are mutable. Calling any of the manipulation methods will change the original moment.
http://momentjs.com/docs/
Looks like you're adding 1 day, and then adding another day for the fechaunix date. Try just setting fechaunix to date once it's already been added:
$scope.resultados.push({
'numerodecuota' : i + 1,
'fechas' : date.add(1, 'days').format("MM/DD/YYYY"),
'pagos' : Math.round($scope.importeprestamo / $scope.numPagos + interes),
'interes' : Math.round(interes),
'capital' : $scope.importeprestamo / $scope.numPagos,
'fechaunix' : date.unix()
});
Because you are adding one day twice in your code
Once here
'fechas': date.add(1, 'days').format("MM/DD/YYYY"),
Again Here
'fechaunix': date.add(1, 'days').unix()
Add only once. see the example
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
var date = moment();
$scope.numPagos="5";
$scope.resultados=[];
for (var i = 0; i < parseInt($scope.numPagos); i++) {
$scope.resultados.push({
'numerodecuota': i + 1,
'fechas': date.add(1, 'days').format("MM/DD/YYYY"),
//'pagos': Math.round($scope.importeprestamo / $scope.numPagos + interes),
//'interes': Math.round(interes),
//'capital': $scope.importeprestamo / $scope.numPagos,
'fechaunix': date.unix()
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
{{resultados}}
</div>
Do you have two times method "date.add(1, 'days')";
try this:
var date = moment($scope.dt);
for (var i = 0; i < parseInt($scope.numPagos); i++) {
var current = date.add(1, 'days');
$scope.resultados.push({
'numerodecuota' : i + 1,
'fechas' : current.format("MM/DD/YYYY"),
'pagos' : Math.round($scope.importeprestamo / $scope.numPagos + interes),
'interes' : Math.round(interes),
'capital' : $scope.importeprestamo / $scope.numPagos,
'fechaunix' : current.unix()
});
}// End for loop

How to compare date with current date for applying logic

<script>
$(document).ready(function(){
if(date.now()>($("[id$=clear2]").val)+2){
$("[id$=clear]").val("");
$("[id$=clear2]").val("");// date value
$("[id$=clear3]").val("");
}
});
</script>
I want to check that current date(dd/mm/yyyy) is greater than date(dd/mm/yyyy) value + 2 days .I was working several scenarios .that by removing if condition it is working fine .By using this it is not working well .Can you show some solution so that i can move forward
Try this:
var d1 = '31/11/2015'.split('/');
var d2 = '27/12/2015'.split('/');
var date1 = new Date(d1[2],d1[1],d1[0]); // YYYY,MM,DD
var date2 = new Date(d2[2],d2[1],d2[0]);
var numOfDaysToAdd = 2;
date2.setDate(date2.getDate() + numOfDaysToAdd);
if (date1.getTime() < date2.getTime()) {
alert('date1 is before date2');
}
Working with dates in javascrip:
javascript
$(document).ready(function () {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
$("#today").val(today.toUTCString());
$("#tomorrow").val(tomorrow.toUTCString());
$("#checkDate").click(function () {
var newDate = new Date($("#today").val());
newDate.setDate(newDate.getDate() + 2);
var parsedTomorrow = new Date($("#tomorrow").val());
var comRes = newDate > parsedTomorrow;
alert(comRes);
});
});
HTML
<input type="text" id="today" />
<input type="text" id="tomorrow" />
<input type="button" id="checkDate" />
DEMO
Use JavaScript Date Object to compare dates in javascript.

At the submit button start time and end time to be calculate by javascript

i have tried to get start time and end time by java-script but i dono how to get on submit button it have to run on side of submit button how much time to run a Report...
var begin_date = new Date();
//begin_time = begin.date.getTime();
begin_time = begin_date.getMilliseconds();
begin_date2 = begin_date;
var end_date = new Date();
//end_time = end_date.getTime();
end_time = end_date.getMilliseconds();
total_time = end_time - begin_time;
'Begin Time (ms): ' + begin_time;
'End time (ms): ' + end_time + "\n"+' Total time (ms): ' + total_time;
like wise i have to get in javascript ...how to achieve this ?
Here's id the code that myt help ur purpose
$(document).ready(function () {
var datetime = new Date();
var starttime = datetime.getTime();
$('#abc').click(function () {
var datetime1 = new Date();
var endtime = datetime1.getTime();
alert(starttime);
alert(endtime);
var time_diff = starttime - endtime;
alert(time_diff);
});
});
<input type=button value=button id='abc'>
I have created created a demo fiddle for this demo
This script gives how much time Elapsed from start to end (till submit button pressed) - Time is in milliseconds.
SCRIPT:
var begin_date;
var btime1,btime2,btime3,btime;
var etime1,etime2,etime3,etime;
var end_date;
function f1(){
begin_date = new Date();
btime1=begin_date.getHours();
btime2=begin_date.getMinutes();
btime3=begin_date.getSeconds();
}
function f2(){
end_date = new Date();
etime1=end_date.getHours();
etime2=end_date.getMinutes();
etime3=end_date.getSeconds();
total_time = end_date-begin_date;
}
$(document).ready(function(){
$("#b1").click(function(){
f2();
$("#start").val(btime1+":"+btime2+":"+btime3);
$("#end").val(etime1+":"+etime2+":"+etime3);
});
});
HTML:
<body onload="f1()">
<button id="b1">button</button><br/><br/>
START: <input type="text" id="start">
END: <input type="text" id="end" >
</body>

Run function for 30 min

Here's what I want to do.
Execute a function : once, at some time of the day.
The function run for 30 minutes.
I've tried setTimeout but it doesn't fit my requirement because it run the function after X millisecond. Whereas I need the function to execute right away, at desired time for 30 minutes. Code as attached.
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var day = self.getDate();
var month_name=new Array(12);
month_name[0]="January"
month_name[1]="February"
month_name[2]="March"
month_name[3]="April"
month_name[4]="May"
month_name[5]="June"
month_name[6]="July"
month_name[7]="August"
month_name[8]="September"
month_name[9]="October"
month_name[10]="November"
month_name[11]="December"
var month = month_name[self.getMonth()];
var fullDate = month+' '+day+' '+hour+':'+minute;
function someFunction() {}
function closeFunction(){
noticeDiv.css('display', 'block');
mainDiv.css('display', 'none');
}
function executeFunction(targetDate){
if (fullDate == targetDate){
setTimeout ( closeFunction(), 180000 );
}else{
someFunction();
}
}
executeFunction(targetDate);
Use setInterval Function
Syntax-> var interval = setInterval(function(){function_name()},timeout In milliseconds);
To clear Interval or stop function we use ->clearInterval(interval);
HTML
<!-- Hide by default, show at target time -->
<div id="noticeDiv" style="display: none">
<h2>Registration Closed.</h2>
</div>
<!-- Show by default, hide at target time -->
<div id="mainDiv">
<h2>Registration Open.</h2>
</div>
jQuery
$(document).ready(function () {
var d = new Date();
var hour = d.getHours();
var minute = d.getMinutes();
var day = d.getDate();
var month_name = new Array(12);
month_name[0] = "January"
month_name[1] = "February"
month_name[2] = "March"
month_name[3] = "April"
month_name[4] = "May"
month_name[5] = "June"
month_name[6] = "July"
month_name[7] = "August"
month_name[8] = "September"
month_name[9] = "October"
month_name[10] = "November"
month_name[11] = "December"
var month = month_name[d.getMonth()];
var fullDate = month + ' ' + day + ' ' + hour + ':' + minute;
console.log(fullDate);
fulldate = 'May 3 17:1';
function executeFunction(targetDate) {
x = 0;
if (fulldate == targetDate) {
//set closing time of function 180000 = 30 min.It will hide div registration open and show registration closed div.
interval = setInterval(closeFunction, 180000);
} else {
openFunction();
}
}
function openFunction() {
console.log('Registration is now open')
}
function closeFunction() {
x++;
$('#mainDiv').append(x);
if (x == 1) {
$('#noticeDiv').show();
$('#mainDiv').hide();
clearInterval(interval);
}
}
// Execute time
executeFunction('May 3 17:1');
});
Working Demo http://jsfiddle.net/cse_tushar/8r5T8/

Categories

Resources