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
Related
I need to create a form with 2 date fields.
User will enter first date field (start-date) and I need to calculate 4 weeks from start date in the second date field (one-month-expiry). Better still: is there a way to calculate 1 calendar month instead of weeks?
I've managed to get the second field to populate a date - but it's not correct.
This is JavaScript, which I don't really understand. I've managed to get this far just by googling.
<script type="text/javascript">
document.getElementById('one-month-expiry').value
= (new Date(document.getElementById('start-date').valueAsDate
+ (6.04e+8 * 4)))
.format("dd/MM/yyyy");
</script>
It keeps returning the same date (29/01/1970). So I've obviously managed to stuff something up.
Any ideas how to include the first date field as part of my calculation?
<script type="text/javascript">
let date = new Date(document.getElementById('start-date').valueAsDate);
date.setMonth(date.getMonth() + 1);
document.getElementById('one-month-expiry').value = date.format("dd/MM/yyyy");
</script>
Beware that this might have some issues with edge cases. For example, adding one month to 31st January will give you 31st February, which does not exist, causing the date to roll over to 2nd March instead.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
I am using the Date Range Picker from daterangepicker.com.
How can I set a minimum date range limit for this Date Range Picker?
For example, I want to set minimum limit of 3 days so the user can only select a date range of 3 days or more.
At the moment my code for the date range picker is just simply instantiating it with:
$('input[name="daterange"]').daterangepicker();
Here's one option that seems to work. Note that it doesn't block out dates or give any notification to the user, it just forces the date range to be a certain length (if user selects shorter, it changes the end date to the minimum length based on start date & min length)
https://github.com/dangrossman/daterangepicker/pull/1731/files
This is the answer from the developer of the Date Range Picker:
"There is not an option for that, you have to code it yourself"
https://github.com/dangrossman/bootstrap-daterangepicker/issues/1282
The following code works if the minimum date is today. You can also set your minimum date by providing it upon initialization
$('input[name="view_date"]').daterangepicker({
singleDatePicker: true,
minDate:new Date(), //sets minimum date to today
});
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
Appreciate any help. Have searched many pages on this forum about Javascript datepicker dates. They all include two textbox calendars and not a compound bootstrap one.
I have a compound calendar (one input and a popup comes up displaying two boxes for from and to date and an apply button). When I search, it works, as long as the date I am searching for doesn't end on the date I am searching, for example, searching for 06/12/2015-06/18/2015 will not include results from the 18th June (06/18/2015). This is also the case if I enter the same date for start and end dates.
SUMMARY: need a way to set "start" and "end" so that I can add a day to the "end" day:
$('#picup-range').on('apply.daterangepicker', function(start, end) {
submitFilter();
});
function submitFilter() {
$('#filter').submit();
}
Ended up having to change Java database query that provided the data.
I'm using this version of Bootstrap DatePicker: http://eternicode.github.io/bootstrap-datepicker/ (the range type), and i have uploaded my demo on JSFiddle on here: http://jsfiddle.net/qs5co179/6/
The relevant JavaScript:
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yyyy",
minViewMode : 1
});
I have set the parameter minViewMode : 1 so I can view only months on calendar instead of full days, the reason is that I want to strict the user to enter:
1st day of the month in: input name="start"
and strict them too to enter only the last day of the month in: input name="end" (but the default is always 1st day of the month when you click)
For example my data entry that i am looking for like below:
From: 01/07/2015 - To: 30/09/2015.. in this format (dd/mm/yyyy)
Now I can't find any parameter to set the calender to pick the last day of the month instead of always 1st day when you click on the month in "To:" field.
one more thing also that I want to always make "From:" and "To:" having 3months period and no less, I want always to make the range 3 months minimum for the entery.
Thanks a lot in advance...
You could attach an event handler to the changeDate event (doc), and change the date manually (i.e. add a month, substract a day).
For the date handling part, I would
Get the date parts
Increase the month by one, if its December, then change it to January
Create a new Date instance
date = date.setDate(date.getDate() - 1) to get the correct day
The date parts could be exctracted by simple string slicing:
var day = str.slice(0,2);
var month = str.slice(3,5);
var year = str.slice(6,10);