I'm using a datepicker and a timepicker to have a user choose a specific date and time. In my controller, I intend to combine the selected date and the selected time.
I'm using the most current production versions of AngularJS, Bootstrap, Angular UI-Boostrap, and MomentJS. I have the latest Angular-Moment added too, but not sure if/how it might help address the issues noted below.
I'd use a datetimepicker, but there's too many to choose from and not a lot of time to figure out which one does everything I need (validation, masking, bootstrap v3, dependency on other datetimepickers, etc.).
In my app I have included and successfully used MomentJS for other purposes, but in this case, I'm having an issue where the datepicker and the timepicker are each returning the correct value, but MomentJS is returning the wrong value when I load those dates/times into a moment() object.
Here's some examples of what I'm running into... First BeginDate, and EndDate values are coming from the Angular UI-Bootstrap DatePicker. BeginTime and EndTime are coming from the TimePicker of the same library.
DatePicker and TimePicker examples
<!-- datepicker nearly mirrors the example on the ui-bootstrap docs -->
<uib-timepicker ng-model="task.BeginTime" ng-change="TimeChanged()" hour-step="hourSteps" minute-step="minuteSteps" show-meridian="true" required></uib-timepicker>
JS console output examples
// returns correct value: Wed Nov 04 2015 00:00:00 GMT-0800 (Pacific Standard Time)
console.log("$scope.task.BeginDate = " + $scope.task.BeginDate.toString());
// 11/04/2015 selected
// returns correct value: Sat Oct 31 2015 08:00:52 GMT-0700 (Pacific Daylight Time)
console.log("$scope.task.BeginTime = " + $scope.task.BeginTime.toString());
// 08:00 PM selected
// returns correct value: Wed Nov 04 2015 00:00:00 GMT-0800 (Pacific Standard Time)
console.log("$scope.task.EndDate = " + $scope.task.EndDate.toString());
// 11/04/2015 selected
// returns correct value: Sat Oct 31 2015 09:00:52 GMT-0700 (Pacific Daylight Time)
console.log("$scope.task.EndTime = " + $scope.task.EndTime.toString());
// 09:00 PM selected
This situation gets worse when I involve MomentJS to help me parse and concatenate the dates and times. (I've tried with and without .toString(). The next lines in my test are as follows:
// returns: 04/20/2015
var beginDate = moment($scope.task.BeginDate.toString(), "MM/DD/YYYY");
console.log("beginDate = " + beginDate.format("MM/DD/YYYY"));
// returns: Invalid date
var beginTime = moment($scope.task.BeginTime.toString(), "HH:mm A");
console.log("beginTime = " + beginTime.format("HH:mm A"));
// returns: 04/20/2015
var endDate = moment($scope.task.EndDate.toString(), "MM/DD/YYYY");
console.log("endDate = " + endDate.format("MM/DD/YYYY"));
// returns: Invalid date
var endTime = moment($scope.task.EndTime.toString(), "HH:mm A");
console.log("endTime = " + endTime.format("HH:mm A"));
If I combine the dates and times right now, I'll of course get 04/20/2015 00:00 AM returned.
Why are the dates being changed to be 8 months earlier?
Why are the times an invalid date after being loaded into MomentJS?
How do you proposed I fix this?
Why in the world does JavaScript make dates and times so difficult to work with? (I can Google that one later - just venting.)