AngularJS - Increase the input date by 6 hours before converting it to JSON

Question

AngularJS - Increase the input date by 6 hours before converting it to JSON

Is there a way to add 6 hours to an input date in AngularJS?

I attempted the following code:

var eventStart = new Date ($scope.event.startdateid);
var startDate = new Date ( eventStart );
startDate.setHours ( eventStart.getHours() + 6 );

event.startdateid = new Date(startDate).toJSON();

However, nothing seems to be happening...

Here is my HTML snippet:

<input type="date" name="startdateid" ng-model="event.startdateid" min="{{date | date:'yyyy-MM-dd'}}">

Could you please point out where I may have made a mistake?

Thank you!

javascript angularjs json

Answer 1

Answer №1

Don't worry about converting anything to JSON in the first place. Your code looks fine (though it's missing the use of $scope or controllerAsSyntax to pass variables to the view - let's assume it's just for demonstration purposes here), so any issues may be in your view.

To solve this, simply utilize the ngChange directive like so:

Check out this functional example:

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.setHours = function() {
    $scope.event.startdateid.setHours($scope.event.startdateid.getHours() + 6);
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <input type="date" name="startdateid" ng-model="event.startdateid" min="{{date | date:'yyyy-MM-dd'}}" ng-change="setHours()">
  <hr>
  <!-- The date with +6 hours -->
  <span ng-bind="event.startdateid | date:'yyyy-MM-dd HH:mm'"></span>
</body>

</html>

Answer 2

Don't worry about converting anything to JSON in the first place. Your code looks fine (though it's missing the use of $scope or controllerAsSyntax to pass variables to the view - let's assume it's just for demonstration purposes here), so any issues may be in your view.

To solve this, simply utilize the ngChange directive like so:

Check out this functional example:

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.setHours = function() {
    $scope.event.startdateid.setHours($scope.event.startdateid.getHours() + 6);
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <input type="date" name="startdateid" ng-model="event.startdateid" min="{{date | date:'yyyy-MM-dd'}}" ng-change="setHours()">
  <hr>
  <!-- The date with +6 hours -->
  <span ng-bind="event.startdateid | date:'yyyy-MM-dd HH:mm'"></span>
</body>

</html>

Answer 3

Answer №2

What about trying out momentJS library instead?

moment(someDate).add(6, 'hours');

Answer 4

What about trying out momentJS library instead?

moment(someDate).add(6, 'hours');

Answer 5

Answer №3

If you're looking for a solution, I suggest utilizing the Datejs library

Here's one way to do it using vanilla JavaScript, without relying on any third-party libraries:

Date.prototype.addHours = function(h) {    
   this.setTime(this.getTime() + (h*60*60*1000)); 
   return this;   
}

Alternatively, you can simply adjust the time by 6 additional hours, similar to your existing code:

startDate.setTime(this.getTime() + (6*60*60*1000));

Answer 6

If you're looking for a solution, I suggest utilizing the Datejs library

Here's one way to do it using vanilla JavaScript, without relying on any third-party libraries:

Date.prototype.addHours = function(h) {    
   this.setTime(this.getTime() + (h*60*60*1000)); 
   return this;   
}

Alternatively, you can simply adjust the time by 6 additional hours, similar to your existing code:

startDate.setTime(this.getTime() + (6*60*60*1000));

AngularJS - Increase the input date by 6 hours before converting it to JSON

Answer №1

Answer №2

Answer №3

Similar questions

Ways to Randomly Flip Divs

Accordion featuring collapsible sections

How can data be passed from a directive to a controller in Angular?

Using Jquery selectors along with variables to perform targeted search operations

Incorporating middleware in Next.js to remove route protection

Can a form be submitted using an Ajax request triggered by a div element instead of an input type submit?

If a condition is present, the checkbox in the list needs to be unchecked

The 'npm start' command is failing to recognize the changes made to the

Identify this concept: a data structure that arranges all elements in an array towards the beginning

AngularJS can be used to set a specific character limit for text

Encountering an issue while attempting to locate an already existing product in the localStorage using JavaScript

The Mongoose .lt method is unable to process the post value

Guide to accessing URL or parameters in the directory of a NextJs 13 application

Harness the power of ng-click in conjunction with data-ng-href for a

Executing both JavaScript Promise .then() and .catch concurrently

Tips for handling function calls that result in RuntimeExceptions in Java?

dynamically loading jQuery scripts and content via ajax

How can I utilize Axios in Vue.js to access a local JSON file?

How to update an Array<Object> State in ReactJS without causing mutation

What is the best way to identify a specific list item from a dropdown menu and determine its position on