Bootstrap Datepicker - Set startDate with multidate - javascript

I have a datepicker div with multi date and a few dates set with setDates.
$("#datepicker").datepicker({
multidate: true,
startDate: "08/01/2016",
endDate: "11/30/2016"
});
$("#datepicker").datepicker('setDates',["08/01/2016","09/10/2016","10/15/2016","11/30/2016"]);
The problem is that it shows the last date by default(11/30/2016). I want it showing the first date instead(08/01/2016). What should I do?
The JSFiddle is: https://jsfiddle.net/itzuki87/tdj2Lscr/4/

Just switch 1st date with last date:
$("#datepicker").datepicker({
multidate: true,
startDate: "08/01/2016",
endDate: "11/30/2016"
});
$("#datepicker").datepicker('setDates',["11/30/2016","09/10/2016","10/15/2016","08/01/2016"]);

Related

Limit the minimum year in DatePicker selection

I'm using jQuery DatePicker to select a date on my form. I want to limit the years in that calendar in such a way that it will display the years from 1900 and up.
I tried this code:
$('#' + CalenderId).datepicker({
format: "dd/mm/yyyy",
autoclose: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:+0'
});
But it still shows the year earlier than 1900:
Is there any other way available to limit this?
startDate: '-30y',
endDate: '+0y'
This will help you to restrict year
eg: if current year is is 2020 then
it will allow to select start year as 2020-30 = 1990
and end year as 2020
here is the code:
$("#year").datepicker({
autoclose: !0,
yearHighlight: !0,
format: "yyyy",
viewMode: "years",
minViewMode: "years",
startDate: '-30y',
endDate: '+0y'
})
The yearRange is only for the list of years. To limit the entered date itself, you need to use minDate and maxDate. Example:
yearRange: "-150Y:-10Y",
minDate: "-150Y",
maxDate: "-10Y",
Using yearRange: "1900:+0" will only give you years 1900+.

bootstrap datepicker not retaining value on focusout

I am working on bootstrap datepicker.
function initializeDatePicker() {
$('#milestone_start_date').datepicker({
weekStart: 1,
startDate: '-1m',
endDate: '+13m',
autoclose: true,
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#milestone_end_date').datepicker('setStartDate', minDate);
});
$('#milestone_end_date').datepicker({
weekStart: 1,
format: 'yyyy-mm-dd',
autoclose: true
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#milestone_start_date').datepicker('setEndDate', maxDate);
});
}
I called this function for multiple times to update input startDate, EndDate fields.
$('#milestone_end_date').datepicker('destroy');
$('#milestone_start_date').datepicker('destroy');
$('#milestone_start_date').val(data.start_date);
$('#milestone_end_date').val(data.end_date);
initializeDatePicker();
After AJAX call, correct values are displayed in start, EndDate popups. But if I clicked startDate field. And focusOut from the field. Value in startDate changes to today.
I am not sure what is wrong here.
Please help me. Thanks in advance.

Date picker using jquery for dob year validation

I am using date picker from Jquery. Where currently I facing one problem By default the calendar will show till 2100 years but if the user select any feature date or current date the system should not accept. The system should accept the date minimum 10 year previous from todays date.
I am bit confused how to do I tried with min year & max year but If i gave year range as 1900 to 2015 calendar was showing till 2015 sep only but i want to show till 2100
Here is the jsbin Link
Guys kindly help me
Here is the Jquery code
$("#txt_dob").datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
changeYear: true,
//showButtonPanel: true,
yearRange: '-115:+10',
beforeShow: function () {
setTimeout(function (){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
},
}).on('change', function() {
if($('#txt_dob').valid()){
$('#txt_dob').removeClass('errRed');
}
// triggers the validation test on change
});
Thanks in advance
My solution would be to create a Date object:
var date = new Date(); // current date
Then substract 10 years:
date.setFullYear(date.getFullYear() - 10)
Then affect this date to be the maximum date of your date picker
$("#txt_dob").datepicker({
dateFormat: "mm-dd-yy",
maxDate: date,
changeMonth: true,
changeYear: true
});
Use the maxDate property of the date picker as follows:
maxDate: '-10Y'

bootstrap embedded/inline datepicker show last month on setDates

I'm using bootstrap datepicker and I'm trying to set dates (events) from returned array of dates, but when I set dates by using datepicker's method (setDates), It's shows the month of the last date in the array of events, how to let it return to the current month.
var events = ['02/02/2015','02/05/2015','02/09/2015','03/09/2015'];
$('.calendar').datepicker({
multidate: true,
daysOfWeekDisabled: "0,1,2,3,4,5,6",
todayHighlight: true
});
$('.calendar').datepicker('setDates', events);
JSFiddle
Demo
Try this
var todayDate = new Date()
var events = ['02/02/2015','02/05/2015','02/09/2015','03/09/2015',todayDate ];
$('.calendar').datepicker({
multidate: true,
daysOfWeekDisabled: "0,1,2,3,4,5,6",
todayHighlight: true
});
$('.calendar').datepicker('setDates', events );

Bootstrap datepicker today's date selected when calendar open first time

I am using this datepicker .
My issue is when I click on textbox on which datepicker is attached, it opens the calendar with today's date selected.
What I want is when a calendar opens first time it should not have any date selected until a user select a date.
Example:(Today's Date is 08/06/2014)
As in the second picture the calendar opens with today's date selected.
Below is my code for assigning datepicker to textbox
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
});
use set date function to set null date. try this its simple.
$("input[id*=txt_DateFrom]").datepicker("setDate" , null);
I found the solution
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
}).datepicker("setDate",null);
I Hope it might help someone..
The problem in selecting current date when using minDate : moment().
Solution: try using like below:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});

Categories