We Keep Coding

Default date range with lightpicker.js and moment.js

How can I get the following codepen to default to showing all the data. I currently defaults to 21/11/2019 - 28/11/2019. If I change the range to 01/11/2019 - 30/11/2019 it shows all the data. I'm using lightpicker.js and moment.js. Thank you.
UPDATE: What I'm trying to do is show all the data with nothing in the Date Range. Just page defaulting to show everything with no filters. Then I should be able to filter if I choose dates in the Date Range. When I comment out the line picker.setDateRange(new Date(), moment().add(7, 'day')); It show blank text box for the Date Range but no data is shown.
JS
var picker = new Lightpick({
field: document.getElementById('datepickerA'),
singleDate: false
});
picker.setDateRange(new Date(), moment().add(7, 'day'));
$scope.onOkA = function(){
var startDate = picker.getStartDate().format('MM/DD/YYYY')
var endDate = picker.getEndDate().format('MM/DD/YYYY')
if(startDate && endDate){
$scope.filteredTicketA = $scope.ticketsA.filter(ele=>{
return (new Date(ele.Date)-new Date(startDate)>=0) && (new Date(ele.Date)-new Date(endDate)<=0)
})
}
}

new Date() will default to today, if you want it be 01/11/2019 then use new Date(2019,11-1, 1).
However I would use some constants to make code clearer, replace picker.setDateRange() sentence with these 3 lines:
var startDate = new Date(2019,11-1, 1); // be aware that month is 0 based.
var endDate = moment(startDate).endOf('month');
picker.setDateRange(startDate, endDate);
as a quick solution for onOKA(){} I would change this:
var defaultStartDate = moment(new Date(1, 10, 2019));
var startDate = (pickerB.getStartDate() || defaultStartDate).format('MM/DD/YYYY');

why are the dates not being generated properly?

I am using a function in Angular JS to generate the dates for the past one week starting from today's date. I am storing these dates in an array and then using that array to flood a dropdown.
The following is the code that is being used by me.
generate() {
this.date_new = [];
var date = new Date();
var date1 = new Date();
for (var i = 0; i < 7; i++) {
date.setDate(date1.getDate() - i);
var a = date.toString();
var str = this.convert(a);
this.date_new.push(str);
}
}
Here convert is a function which is being used to convert the dates to the required format. A screenshot of generated dates is attached below.
As evident from the screenshot, the last two dates are incorrect. Can somebody explain to me, what the problem is?

The setDate() method sets the day of the Date object relative to the
beginning of the currently set month.
The above is from MDN.
Your code works for the first 5 dates, but once you are modifying your February date with -1, it sets the day relative to the current month e.g. February. So this will turn into January (as you are setting the day to -1), same happens in the next iteration and you get December.
For an easy fix you can just set the date variable to new Date() in the first line of your for loop.

The issue here is using the same date variable in the loop. You need to re-initialize it.
As can be seen in Parameters Value section in the link here. Zero and negative values in setDate() sets the date from previous month.
Hence at setDate(0), date value is set to last day of Feb. Now since you are using the same variable, setDate(-1) takes the previous month from Feb hence you get Jan.
You need to change the code to something like this:
generate() {
this.date_new = [];
var date1 = new Date();
for (var i = 0; i < 7; i++) {
// re-initialize date
var date = new Date();
date.setDate(date1.getDate() - i);
var a = date.toString();
var str = this.convert(a);
this.date_new.push(str);
}
}
Hope this helps :)

The issue here is that negative numbers inside the setDate method don't work quite well.
Please update the code to something like below:
this.date_new = [];
var date = new Date();
var date1 = new Date();
for (var i = 0; i < 7; i++) {
date= new Date(date1.getFullYear(), date1.getMonth(),date1.getDate()-i);
var a = date.toString();
var str = this.convert(a);
this.date_new.push(str);
}
Hope this will solve your problem.

get an array of dates from today for datepicker with Javascript

I am trying to write a function that returns an array of dates from today till the maximum date, so that I can restrict the date picker selection. At the moment I have the following:-
datesAfterToday: function (date) {
var dates = []
var currentDate = new Date()
var endDate = new Date(8640000000000000).getFullYear()
var addDays = function (days) {
var date = new Date(this.valueOf())
date.setDate(date.getDate() + days)
return date
}
while (currentDate <= endDate) {
dates.push(currentDate)
currentDate = addDays.call(currentDate, 1)
}
return dates
}
and then I am using Vue.js to mount it as follows :-
mounted () {
this.allowedDates = this.datesAfterToday
},
however I am only getting an array of objects instead of the proper array.
How can I get the proper array of dates so that I can bind it to the allowdates property.
Thanks for your help and time!

For starters new Date(8640000000000000).getFullYear() will set endDate to the year of that date, which is 275760. currentDate will be today's date (in milliseconds), which at the time of me writing is 1511272934156. As you can see currentDate is always greater than endDate, so your while loop never goes to the statements inside.
Another issue is that the date you picked is really far in the future and you're populating an array one day at a time. Your loop will most likely make the page freeze or crash completely. Try picking a date that's more manageable.
For instance, in the snippet below I set endDate by first initializing it to today, then setting the year to exactly one year from now. This gives me an array with roughly 365 values.
You can imagine how big this array would be if I used a year that was 273,748 years in the future.
var dates = []
var currentDate = new Date()
var endDate = new Date()
endDate.setFullYear(endDate.getFullYear()+1)
var addDays = function (days) {
var date = new Date(this.valueOf())
date.setDate(date.getDate() + days)
return date
}
while (currentDate <= endDate) {
dates.push(currentDate)
currentDate = addDays.call(currentDate, 1)
}
console.log(dates)
With all that being said, it looks like you're actually allowed to pass an object specifying the minimum and maximum values rather than an array.
https://vuetifyjs.com/components/pickers#example-6
let d = new Date() // today
let d2 = new Date()
d2.setFullYear(date.getFullYear()+1) // Next year
this.allowedDays = {
min : d.toISOString().substr(0, 10), // e.g. 2017-11-21
max : d2.toISOString().substr(0, 10)
}

Another option would be to use vuejs-datepicker For example:
<script>
var state = {
disabled: {
to: new Date(), // Disable all dates up to specific date
from: new Date(8640000000000000) // Disable all dates after specific date
}
}
</script>
<datepicker :disabled="state.disabled"></datepicker>
See Disabled Dates in the documentation.

How to include multiple conditions in afterEQ in rome js calendar?

In Rome, I would like to include multiple conditions, in my second calendar, that it would disallow dates that are earlier than today AND disallow dates that are earlier than what was chosen in first calendar.
var today = moment().format();
var startDate = rome(startDateElem, {dateValidator : rome.val.afterEq(today)});
var endDate = rome(endDateElem, {dateValidator : rome.val.afterEq([startDateElem,
today])});
I could specify default value to start date (today), but is there any other way?

your code should be like this:
var moment = rome.moment;
var today = moment().format();
var startDate = rome(startDateElem, {dateValidator : rome.val.afterEq(today)});
var endDate =rome(endDateElem, {dateValidator:function(d){
var m = moment(d);
var startD=rome(startDateElem).getDate();
if(startD){
return m.isAfter(today)&& m.isAfter(startD);
}else{
return m.isAfter(today)
} }
});
this a working demo that can help you

parse.com - how i can create query equal createdAt by date only with javascript

I want to find data by "createdAt" field but i need to search with date only (without time).
var d = new Date();
var query = new Parse.Query("TableName");
query.equalTo("createdAt", d);

What you basically have to do to generate two dates:
date at 0:0:0 time
date+1day at 0:0:0 time
Then search for:
query.greaterThanOrEqualTo('createdAt', date);
query.lessThan('createdAt', datePlusOne);
This effectively gives you the range of dateT0:0:0 - dateT23:59:59.99999 inclusive, but in a safe way
If you want to use pure JavaScript:
// assuming date is the date/time to start from
date.setHours(0, 0, 0, 0);
// hours/min/sec/ms cleared
var datePlusOne = new Date(date);
datePlusOne.setDate(datePlusOne.getDate() + 1);
You can also use the moment library to make your code easier to read/maintain. This library is also used server-side in parse.com, though it is an older version.
m1 = new moment(date);
m1.startOf('day');
m2 = new moment(m1);
m2.add(1, 'day');
// convert moment back to JavaScript dates
date = m1.toDate();
var datePlusOne = m2.toDate();
Full solution using moments:
var d = new Date();
var query = new Parse.Query("TableName");
var start = new moment(d);
start.startOf('day');
// from the start of the date (inclusive)
query.greaterThanOrEqualTo('createdAt', start.toDate());
var finish = new moment(start);
finish.add(1, 'day');
// till the start of tomorrow (non-inclusive)
query.lessThan('createdAt', finish.toDate());
query.find.then(function(results) {
// use results
});

If you are looking for results, filtered by "created today", you could do this:
var moment = require("moment");
var start = moment().sod() //Start of day
var end = moment().eod() //End of day
var query = new Parse.Query("myClass")
query.greaterThanOrEqualTo("createdAt", start.format());
query.lessThan("createdAt", end.format());
query.find({...});
Of course, if you are looking for a greater timespan than "today", you would go with Timothy's answer.
This code has been tested in Parse Cloud Code with Momentjs 1.7.2