I am developing a site where i am using jQuery-UI datepicker, the problem is i have to select all dates and put it into an array when the user select a start date and end date using a aingle jquery UI datepicker.
i checked the jQuery-UI documentation but found nothing that solve my problem.
I want date-range to be picked up like this.
i have to use jQuery-UI, so any useful idea will be appreciated,
Thanks
you can use this method:
1.The user clicks the 2 dates
2.You save them as two variables(startDate,endDate)
3.you make a loop:
var numberOfDaysToAdd=0
var startDate;
var endDate;
var dateCheck=startDate;
var DatetoAddInArray = startDate;
var array = [];
while(DatetoAddInArray!=endDate){
//every time you check if the date is equal to the endDate
//if is not you add it in the array with the dates and then
//you increase the index.
//the while loop ends when you find the end Date
//You can change your code to add or not the start and the end dates
numberOfDaysToAdd++;
DatetoAddInArray.setDate(DatetoAddInArray.getDate()+numberOfDaysToAdd);
array[numberOfDaysToAdd-1]=DatetoAddInArray;
}
The above could be an easy way to store all the dates from the start to the end date.
(!) If the datepicker allows the user to click a startDate and then click a endDate that is before the startDate, you have to alert a message to the user to select a correct range.
Thanks.
I created datepicker like this, so no need for more answers. Thanks
Here is working Fiddle
Related
Like the title says:
I'm looking for a way to let a user fill in a form where they have to set a start date and end date.
The end date can be max 2 months after the start date they filled in.
Does anyone knows a way how to do that?
Thanks!
You can use momentJS, a great lib to handle dates and times.
const startDate = '20180104'; // could be another format, check the doc
moment(startDate).add(2, 'months')`
The lib is really powerful, be sure to check it ;)
I am adding a project start and project end date picker, <input type="date">, to a quote page for my web clients, however, I have never worked with these before. How can I use the data from these date pickers to create an if statement that if the project end date is earlier than the end date or vice versa, it will display an error message?
This is what you want. Add ids to your date pickers, get their value using simple selectors and add them to the variables. Compare the variables in the if function
var startDate = document.getElementById('startDate_id').value
var endDate = document.getElementById('endDate_id').value
if(startDate > endDate){display error}
else{do nothing}
I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk
I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox
I'm using the Datepicker in two input fields to allow users to select a start and end date, respectively. I was curious if there's a setting for jQuery UI's datepicker to initialize the start date field to a period that is two complete months prior to the end date, which defaults to the current date. So when a user opens the page, the end date will be the current date and the start date will display the two complete months prior to the current date, e.g. end date is initialized to 4-3-2012, the start date would be 2-1-12.
I was going to write some custom formula to handle this, but wanted to be sure there wasn't already a setting for this built into the Datepicker.
$( ".selector" ).datepicker({"defaultDate": ((today.getMonth() +11)%12) + "/01/" + today.getFullYear()});
In order to "subtract 2" from the month, we add 11 and take the remainder because JS months are 0 based and we don't want to end up at -1 month.
edit: algorithm edited as per clarification
JsFiddle
PetersenDidIt did a great job answering this question.
He showed how to use a link to update the jQueryUI Datepicker's selected date by one day. His solution was:
$('a#next').click(function () {
var $picker = $("#datepicker");
var date=new Date($picker.datepicker('getDate'));
date.setDate(date.getDate()+1);
$picker.datepicker('setDate', date);
return false;
});
I am trying to modify it to do the same thing for a week or month. According to the set date api I should be able to use "+1m" and "+1w" to skip a month or week. I can't seem to get the code working with anything other than "+1".
Thoughts?
you can use the same code you have.
when you want one week do like this:
date.setDate(date.getDate()+7);
when you want one month you can do:
date.setMonth(date.getMonth()+1);
Try using FireBug script debugging. Might be some JS exception being generated.