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');
Related
Based on this Supplied Code,
$w.onReady(function () {
//TODO: write your page related code here...
const startFromDays = 4;
const endAtMonths = 9;
const today = new Date();
let startDate = new Date(today);
let endDate = new Date(today);
startDate.setDate(startDate.getDate() + startFromDays);
endDate.setMonth(endDate.getMonth() + endAtMonths);
$w.onReady(function () {
$w("#datePicker1").minDate = startDate;
$w("#datePicker2").maxDate = endDate;
});
});
I need help to find the difference between the endDate and the startDate and output it as Text. Knowing the fact that some start dates can be of the Eg: 26th of Feb and end Date can fall on 3rd March.
This Code is been run on Wixcode, where the dates are used as a Date-picker user input. Thank you.
Start by getting the difference between the two dates using something like what is described in this post.
Then, use that number to populate a text field that you've added to your page.
So, assuming you have a datediff() function declared:
const diff = datediff(startDate, endDate);
$w("#text1").text = diff.toString();
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.
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
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
I want to validate a date field calendar, where dates in the calendar cannot be selected to greater than today. The below code is in the tips of the eval field like "
set a variable called 'return' to true to stop this date from being selected.
var diff = new Date().compare(new Date(date));
var result = diff < 0 ? true : false;
Now I want the same intended result that is the dates in the calendar cannot be selected greater than today.
var result = new Date() < new Date(date);
Expanding on Darin Dimitrov's answer with Pawan's response.
inputField.onchange = function(){
return (new Date() < new Date(this.value))? true: this.value = "";
}