Minimum start date of datepicker - javascript

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

Related

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 get the Australian Time Zone using Javascript? (Not JQuery)

I am trying to help a friend to get the Australian Time Zone for the University Assignment and finding difficulty.
Could someone point us in the right direction?
Thank you!
<script>
function Timezone() {
var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
document.getElementById("add").innerHTML = currentTimeZoneOffsetInHours;
}
</script>
<p id="add"></p>
You simply use
let AuDate = new Date().toLocaleString("en-US", {timeZone: "Australia/Sydney"});
By looking at your code, looks like you are trying to get the current date and time of an Australian timezone. Lets say you want Australian Eastern Standard Time (AEST) and you want the date displayed how they would in Australia DD-MM-YYYY then do the following:
var timestamp_UTC = new Date();
var readable_timestamp_AEST = timestamp_UTC.toLocaleDateString("en-AU", {timeZone: "Australia/Sydney"}).replace(/\//g, "-") + ' ' + somestamp.toLocaleTimeString("en-AU", {timeZone: "Australia/Sydney"});
"en-AU" is the locales argument which tells the toLocalDateString to display the date as DD-MM-YYYY and the second argument is for options (timeZone is just one such possible option). Info about toLocalDateString function can be found here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
Here is some information about the Date() function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
Hope this clears up a few things around getting times and dates from the Date() function.
I think i understand what you mean. But before that i'd like to make 2 points:
1: The Timezone() function should be called somewhere.
<script>
function Timezone() {
var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
document.getElementById("add").innerHTML = currentTimeZoneOffsetInHours;
}
Timezone();
</script>
2: The convention usually is that methods start with a lower case letter. Maybe updateTimezone() would be more appropriate.
Your question can be interpreted in 2 ways now:
you want your timezone's offset in hours and for this the code above should work. getTimezoneOffset() is the way to go.
you want a human readable name of your timezone, as you can see on my site currentmillis.com (in my case it says GTB Summer). You can look in my source code to see how i achieve this:
var s = date.toString();
var iOfP = s.indexOf('('); // index of parenthesis
if (iOfP < 0) {
s = s.substring(s.lastIndexOf(' ') + 1);
} else {
s = s.substring(iOfP+1, s.length-1);
}
if (s.length > 4 && s.lastIndexOf(" Time") == s.length-5){
s = s.substring(0, s.length-5);
}
timezoneM.innerHTML = s;
This works because when you call toString() on the date the result should contain the full name of your timezone: w3schools.com/jsref/jsref_tostring_date.asp

Get days left till end of the month with moment.js

I want to display or hide a link depending on whether there are less than 2 weeks left in the month, using moment.js, but I'm not sure the correct way to go about it.
Currently I have...
if (moment().endOf('month')<=(13, 'days'))
{
//do link stuff here
}
...but I don't think that's the correct way of doing it. It certainly isn't doing anything anyway. Could anyone give me any pointers? Thanks in advance.
You could do something like this:
var a = moment().endOf('month');
var b = moment();
if(a.diff(b, 'days') <= 13)
{
//do something
}
If you're looking for a plain javascript version, I've wrote this function:
function getMonthDaysLeft(){
date = new Date();
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() - date.getDate();
}
Maybe something like this can help.
const d = moment();
const currentDay = d.get("date");
const daysInMonth = d.daysInMonth();
const remainingDays = daysInMonth - currentDay;
console.log(remainingDays <= 13)

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

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.

nextDay, nextWeek, nextMonth Javascript changing date shown in textfield

Im pretty sure there is an answer somewhere, found many of them, but somehow couldnt implement it in my code. I'm aware of mistakes in my code, however Im not sure how javascript works in that case, therefore there is my question. I'd like to know the reason why my function does not work correctly (why months are added?) and how to make it work. Thanks for any kind of answer.
<input type='text' id='calendar_form' />
<input type='button' onclick="nextDay()" value='NextDAY' />
<script>
function nextDay() {
var example = document.getElementById('calendar_form').value;
var date = new Date();
var parts = example.split('.');
date.setFullYear(parts[2], parts[0], parts[1]);
date.setTime(date.getTime() + 86400000);
var dateDay = date.getDate();
var dateMonth = date.getMonth();
var dateYear = date.getFullYear();
document.getElementById("calendar_form").value = dateDay + "." + dateMonth + "." + dateYear;
}
</script>
What Im trying to achive is a set of functions which allow me to change date (dd.MM.yyyy) shown in textfield (as next/prev day, next/prev week, next/prev month). If you can point me in any good direction to look for an answer, Id be grateful.
You swapped month/year because the order is year-month-date. I'd recommend new Date rather than setFullYear as well. You could do: http://jsfiddle.net/nQtQP/.
var date = new Date(parts[2], parts[1], parts[0]);

Categories

Resources