Angular JS UI Bootstrap Datepicker: max-date and init date issue - javascript

What a day I've been having... anyway, I have been assisting some colleagues with an AngularJS project and so much is wrong, anyway... I am using the AngularJS UI Bootstrap Datepicker version 0.11.2 with AngularJS version 1.3. So far so good however I wish to set the minimum date 2 months from the current day, the maximum date six months from the current day and the initial date 2 months from the current day. This is what I have so far:
View
<div data-datepicker
data-ng-model="dt"
data-min-date="minDate"
data-max-date="maxDate"
data-max-mode="day"
data-show-weeks="false"
data-starting-day="1"
data-year-range="2"
class="custom-date-picker"></div>
and in my controller...
var today = new Date(),
twoMonth = today.setMonth(today.getMonth() + 2),
sixMonth = today.setMonth(today.getMonth() + 6);
$scope.today = function() {
$scope.minDate = twoMonth;
$scope.maxDate = sixMonth;
};
$scope.today();
This is all find however I've noticed that minDate is correct, maxDate is actually 8 months in the future and when I add the following to the directive to set the initial date like so (notice data-init-date="minDate")
<div data-datepicker
data-ng-model="dt"
data-init-date="minDate"
data-min-date="minDate"
data-max-date="maxDate"
data-max-mode="day"
data-show-weeks="false"
data-starting-day="1"
data-year-range="2"
class="custom-date-picker"></div>
I get the following error!
TypeError: undefined is not a function
at e._refreshView (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:16705)
at refreshView (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:13968)
at link (js/vendor/angular/ng-ui-bootstrap-tpls-0.11.2.min.js:8:17848)
at B (js/vendor/angular/angular-1.3.0-beta.18.min.js:55:369)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:62:378
at g (js/vendor/angular/angular-1.3.0-beta.18.min.js:48:105)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:47:233
at js/vendor/angular/angular-1.3.0-beta.18.min.js:49:54
at Object.r [as transclude] (js/vendor/angular/angular-1.3.0-beta.18.min.js:52:497)
at js/vendor/angular/angular-1.3.0-beta.18.min.js:215:316 <table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}" ng-switch-when="day" tabindex="0">
Does anyone know where I am going wrong?

It is important to note that your Date gets mutated here:
var today = new Date(),
twoMonth = today.setMonth(today.getMonth() + 2),
sixMonth = today.setMonth(today.getMonth() + 6);
Each setMonth adjusts the original Date. Hence the eight month issue.
The latter issue is caused by the fact that twoMonth and sixMonth are numbers. I think your directive expects Dates instead so wrap them with new Date(...).
Solution
I think something like this should work:
var twoMonth = offsetMonths(2);
var sixMonth = offsetMonths(6);
function offsetMonths(offset) {
var ret = new Date();
ret.setMonth(ret.getMonth() + offset);
return new Date(ret);
}
Of course you can simplify things a lot by using something like moment.js.

Related

Minimum start date of datepicker

Sorry to do this guys, I have zero experience with Java or wix code, you would expect something as basic as what I am after would have a default in built setting for.
I have a date picker on a form, I want the minimum to be now()+3 - but have no idea where to start.
I did read a post that offered the below code:
$w.onReady(function () {
let today = new Date();
let startDate = new Date(today);
startDate.setDate(startDate.getDate() + 3);
let endDate = new Date(today);
endDate.setMonth(endDate.getMonth() + 1); // End Date +1 month from today //
// Set min & max dates //
$w("#datePicker1").minDate = startDate;
$w("#datePicker1").maxDate = endDate;
});
});
However I appear to get this error message:
public/pages/qepnx.js/qepnx.js: Unexpected token (15:0)
Any help would be greatly appreciated.
Thanks!
Okay after much pain I've figured it out, it turns out JS is a lot less forgiving than languages like VBA, { or ( incorrectly placed parenthesis will throw the whole code out which I learnt the hard way.
Code as below:
$w.onReady( function() {
var badDate1 = new Date();
badDate1.setDate(badDate1.getDate());
var badDate2 = new Date();
badDate2.setDate(badDate2.getDate() + 1);
var badDate3 = new Date();
badDate3.setDate(badDate3.getDate() + 2);
$w("#datePicker1").disabledDates = [badDate1, badDate2, badDate3];
})
I'm sure someone who actually knows JS will be appalled by this, but it's simple code and does the job
Thanks

Convert string to date and alter that date

Good day, I am generating 3 dates from a string, I hope the output was:
billing date: 2020/01/11
cutoff start: 2019/11/11
cuttof end: 2019/12/10
but I get the following:
billing date: 2020/11/10
cutoff start: 2019/11/10
cuttof end: 2019/12/10
I would like to know how javascript works with variables or what is the problem since everything is altered
var month = "Jan-20"
var coverage_month_obj = moment(month, 'MMM-YY').toDate();
var billing_date = new Date(coverage_month_obj.setDate(coverage_month_obj.getDate() + 10))
var cutoff_end = new Date(billing_date.setMonth(billing_date.getMonth() - 1))
cutoff_end = new Date(billing_date.setDate(billing_date.getDate() - 1))
var cutoff_start = new Date(billing_date.setMonth(billing_date.getMonth() - 1))
I would like to know how javascript works with variables or what is the problem since everything is altered
Put simply, calling setXXX on a javascript date variable updates that variable in place. ie, it is what we would call "mutable". You might have assumed dates were immutable and did not change in place.
To answer on a better way to achieve your goal, I'd suggest using the other functionality of momentjs to calculate your 3 dates from the given input string.
var month = "Jan-20"
var coverage_month = moment(month, 'MMM-YY');
//Jan-20 I need to convert it into date format and that the day is 11 (2020/01/11) cutoff start, are two months less from that date (2020/11/11) and cutoff end is one month less from Jan-20, but ends on day 10 (2020/12/10)
var billing_date = coverage_month.clone().add(10, 'days');
var cutoff_start = billing_date.clone().subtract(2, 'months');
var cutoff_end = billing_date.clone().subtract(1,'months').subtract(1,'day')
console.log("billing_date",billing_date);
console.log('cutoff_start',cutoff_start);
console.log('cutoff_end',cutoff_end);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Add 1 day to date from spreadsheet via Google App Script / Javascript- Month Keeps Reseting to current month

I am trying to set up a Google App Script function that grabs a date (formatted dd/mm/yy) from the last column of a spread, and creates a new column with the date + one day.
I have seen previous solutions and tried to use the same, i.e.newDate.setDate(lastDate.getDate()+1) but have had issues getting the value formatted correctly in the script. This is a variation of my code that I'm using to loop through for a year's worth of values to see what I get:
for (var i=0;i<365;i++){
var lastRow = outputSheet.getLastRow();
var newDate = new Date();
var lastDate = outputSheet.getRange(lastRow,1).getValue();
var newDateRng = outputSheet.getRange(lastRow+1,1);
Logger.log(lastDate + 1, typeof lastDate, typeof (lastDate + 1));
newDate.setDate(lastDate.getDate());
Logger.log(newDate);
newDate.setDate((newDate.getDate() + 1));
Logger.log(newDate);
var newDateFormatted = Utilities.formatDate(newDate, ss.getSpreadsheetTimeZone(), "dd/MM/YY");
Logger.log(newDateFormatted);
newDateRng.setValue(newDateFormatted);
}
With a start date of "01/03/2020", I get the following behaviour:
01/03/2020
02/05/2020
03/05/2020
...
31/05/2020
01/06/2020
02/05/2020
03/05/2020
...
31/05/2020
01/06/2020
02/05/2020
...
etc. All the way through the year. Although the day increase, the month seems to reset after the first day of the month.
As a note, I am specifically looking to pick the date off of the spreadsheet rather than using new Date as today and new Date +1 as tomorrow.
Thanks
You need to use a different variable in the loop otherwise you will always return to the same month.
Also avoid using strings for the result, keep date objects and display it properly.
The code goes like this :
function otherTest(){
var lastDate = SpreadsheetApp.getActiveSheet().getActiveCell().getValue();
var date = new Date(lastDate); // create new date object
var result = [];
for (var i=0;i<365;i++){
date=new Date(date).setDate(new Date(date).getDate()+1)
Logger.log('date='+new Date(date))
result.push([new Date(date)]);
}
SpreadsheetApp.getActiveSheet().getRange(1,2,result.length,1).setValues(result).setNumberFormat('dd/MM/yyyy');
}

Formatting dates when getting days between 2 dates with JQuery/Javascript

I am trying to calculate the days between 2 dates and it is working as far as I can tell but I keep getting stupidly high numbers which clearly isn't right, I have a feeling this is the way my dates are set out. my dates are set out as dd/mm/yyyy and this is the code I am using:
var diff = new Date(end_date - start_date);
var days = diff/1000/60/60/24;
console.log("diff=>"+days);
This is the question I used to get the answer:
JavaScript date difference Days
When it writes to the console this is the result I get:
diff=>17301.95833332176
I have had a play with the code, although I have not used HTML, i set the vars statically below.
var end_date = new Date("May 25, 2017");
var start_date = new Date("May 23, 2017");
var diff = new Date(end_date - start_date);
var days = diff/1000/60/60/24;
console.log("diff=>"+days);
I have also checked it with a 3 value date format
var end_date = new Date(2017,4,25);
var start_date = new Date(2017,4,23);
var diff = new Date(end_date - start_date);
var days = diff/1000/60/60/24;
console.log("diff=>"+days);
I manage to get an output of 2. Which is what i expected. The code you supplied looks ok to me. Maybe look at the HTML to check that the values being passed are in the correct format.
Jquery datepicker may be of help to you here.
You could also use moment: https://momentjs.com
var moment = require('moment');
var start_moment = moment(start_date);
var end_moment = moment(end_date);
var days = start_moment.diff(end_moment, 'days');
console.log("diff=>" + days);
You can also get weeks, months etc. with this method
Easy solution, is to use countBtw
var { date } = require('aleppo')
//..
date.countBtw('all', date1, date2)

How to add months to date ? Knockout js

I am working on some calculation what i get is no of months, so i need to add to the startdate and display end date dynamically upon added months.
My effort so far :
View Model:
function calculation() {
var self = this;
self.months= ko.observable("");
self.StartDate = ko.observable(""); // On my get i get startdate like **2014-06-24**
self.EndDate = ko.computed(function () {
return self.StartDate() + ?? // i have no clue how to add
});
My cshtml code:
<input type="text" data-bind="value:$data.StartDate" />
<input type="text" data-bind="value:$data.EndDate" />
EDIT :
Fallowing suggestions i tried like this but formatting is not up to mark sadly
self.EndDate = ko.computed(function () {
var date = new Date(self.StartDate());
date.setMonth(date.getMonth() + 8); // tried static
return date.toLocaleDateString() ;
});
I am getting something like 24 February 2015 but i expect to be 2015-02-24 as i passed date in same format
Any suggestions are appreciated
You will have to take in to account the various edge cases that come with dates. For example, the 31st October + 1 month is obviously not the 31st November. And then you have to take in to account that the number of days in February varies depending on whether or not it is a leap year.
Look at the answer from Jazaret in this question to figure out exactly what the date is in x months from now:
How to add months to a date in JavaScript?
Then you can add this to your code:
self.EndDate = ko.computed(function () {
var date = new Date(self.StartDate());
return date.addMonths(5); // add however months you want
});
Adding months (like adding one month to January 31st) can overflow the days field and cause the month to increment (in this case you get a date in March). If you want to add months and then overflow the date then .setMonth(base_date.getMonth()+monthsToAdd) works but that's rarely what people think of when they talk about incrementing months.
I use this to add months to a date when I don't want to overflow the month:
function addMonthsNoOverflow(dateParam, intParam) {
var sum = new Date(new Date(dateParam.getTime()).setMonth(dateParam.getMonth() + intParam);
if (sum.getDate() < dateParam.getDate()) { sum.setDate(0); }
return(sum);
}
Notes:
It handles cases where 29, 30 or 31 turned into 1, 2, or 3 by eliminating the overflow
Day of Month is NOT zero-indexed so .setDate(0) is last day of prior month.
http://jsfiddle.net/zjdj3zxz/1/
Here's a fairly basic example of adding months to a date:
JSFiddle
Fiddle Code:
var ViewModel = function () {
var self = this;
self.StartDate = ko.observable(new Date("2014-06-24"));
self.EndDate = ko.computed(function () {
var myDate = new Date(self.StartDate());
myDate.setMonth(myDate.getMonth() + 5)
return myDate;
});
};
$(function () {
var vm = new ViewModel();
ko.applyBindings(vm);
});
As #AndrewC states in his post, this doesn't cover edge cases and you will have to account for months with different numbers of days in them and handle them according to your requirements.
EDIT: Please include the Moment.js library in your project. This way the date calculation and formatting will be very easy. Just take a look at the examples in the docs.
So, I believe that is what you want:
http://jsfiddle.net/
var ViewModel = function(date, noOfMonths) {
this.calculation = ko.computed(function(){
var m = moment(date);
return m.add('months',noOfMonths).format('YYYY-MM-DD');
},this);
};
ko.applyBindings(new ViewModel(new Date('7/31/2014 17:15:00'), 4));

Categories

Resources