How to set default date in daterangepicker? - javascript

Is there any way to simply set default date as current + 5 day ahead in daterangepicker? Like this:
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
setDate: '+5d',
minDate: new Date()
}, function(start, end, label) {
$('.selector').val(start.format("YYYY-MM-DD"));
});

Like so. You also don't need that callback function since the format string is configurable.
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
startDate: moment().add(5, 'day'),
minDate: moment(),
locale: {
format: 'YYYY-MM-DD'
}
});

var someDate = new Date();
var numberOfDaysToAdd = 5;
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
$('.selector').val(formatDate(someDate));
this helped

Try this:
$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minDate: new Date()
}, function(start, end, label) { $('.selector').val(start.format("YYYY-MM-DD"));
});
var Today= new Date();
Today.setDate(Today.getDate() + 5);//any date you want
$('.selector').daterangepicker('setDate', Today);

Related

Allow the user to select only quarter month in jquery datepicker

How to limit Datepicker to allow the user to select only quarter month of the year
The Datepicker must allow the user to only select the quater month in future. Dates in the past must not be allowed.
Eg.if we are in jan then, in this case, quarter month should be enabled (march) and jan and feb should disable.
if we are in mar then in this case quater month should enabled(march) and jan and feb should disable.
if we are in Apr then in this case quater month should enabled(jun) and jan,feb,mar,apr,may should disable.
$(document).ready(function () {
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
startDate: new Date(),
endDate: '+2y',
}).on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});
try this
$(document).ready(function () {
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
minDate:new Date(new Date().setMonth(new Date().getMonth() + 1)),
maxDate: "+2y"
}).on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});
so try this. this Code Working as you say
$(document).ready(function () {
var currentTime = new Date();
// First Date Of the month
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth(),1);
// Last Date Of the Month
var startDateTo = new Date(currentTime.getFullYear(),currentTime.getMonth() +2,1);
$('.datepickerOne').datepicker({
format: "yyyy-mm",
viewMode: "months",
minViewMode: "months",
autoclose: true,
minDate:startDateTo,
maxDate: "+2y"
}).
on("change", function () {
$("#testDetailsForm").bootstrapValidator('revalidateField', 'formsubmit_date');
})
});

How to set 3 months date range from current date in date picker?

I want to enable only 3 months from current date in bootstrap datepicker.
function addThreeMonthsToStartDate(today) {
var lastDate = new Date(today.getFullYear(), today.getMonth()+3, getDate());
return lastDate;
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Any ideas?
Solution to your problem it allows only 3 months from current date.
$('#startdate').datepicker({
maxDate: "+90d",
minDate:0
});
Try this
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
minDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: lastDate,
dateFormat: "dd/mm/yyyy"
});
Thanks a lot for your suggestions. I got the solution as below:
$("#startdate").datepicker({
isDisabled: function(date) {
var d = new Date();
return date.valueOf() < d.setMonth(d.getMonth()+3) ? false : true;
},
autoClose: true,
viewStart: 0,
weekStart: 1,
maxDate: 0,
dateFormat: "dd/mm/yyyy"
});
you most use startDate and endDate in bootstrap datepicker
function addThreeMonthsToStartDate(today) {
// var today = new Date();
var lastDate = new Date(today.getFullYear(), today.getMonth()+3,
today.getDate());
}
$("#startdate").datepicker({
isDisabled: function(date) {
return date.valueOf() < Date.now() ? false : true;
},
startDate: "dateToday", // If you need to disable past dates
autoClose: true,
viewStart: 0,
weekStart: 1,
endDate: lastDate,
dateFormat: "dd/mm/yyyy"
});

Bootstrap - datesDisabled array of dates and Sunday & Saturday

I want to disable array of dates and sunday and saturday.. My array of dates work perfect, but business logic need to disable sunday and saturday.. How to do this?
This is my code for array of dates:
function checkDateFromForEvent() {
var datesForDisable = new Array();
var clientContext = new SP.ClientContext.get_current();
var eventsList = clientContext.get_web().get_lists().getByTitle("Events");
var camlCheckQry = new SP.CamlQuery.createAllItemsQuery();
var items = eventsList.getItems(camlCheckQry);
clientContext.load(items, "Include(EventDate)");
clientContext.executeQueryAsync(successHandler, errorHandler);
function successHandler() {
if (items.get_count() > 0) {
var iEnum = items.getEnumerator();
while (iEnum.moveNext()) {
var item = iEnum.get_current();
datesForDisable.push(moment(item.get_item("EventDate")).format("DD-MM-YYYY"))
}
}
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable
})
I want to insert in datesDisable paremeter, sunday and saturday..
You can use beforeShowDay hook
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6],
beforeShowDay:function(currentDate){
var dayNr = currentDate.getDay();
if (dayNr==0 || dayNr==6){//you can condition this with your own logic
return false;
}
return true;
}
});
Use daysOfWeekDisabled: [0,6]
$("#holidayDateFrom").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
language: 'bg',
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
datesDisabled: datesForDisable,
daysOfWeekDisabled: [0,6]
})
Demo here

Bootstrap datepicker how to allow past 6 months dates

How can I enable past 6 months dates from today including today in Bootstrap datepicke.
For example if today is 4th October 2015 then calendar will only allow to pick any date between 4th April 2015 to 4th October 2015.
var date = new Date();
// initialize daterange
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
startDate: date
});
startDate should do it (doc)
I'm asuming you are using this, so you can make use of endDate and startDate.
You need to set the startDate to the Date.now - 6 months and the endDate to today.
var now = new Date();
var sixmonthsago = new Date(now.setMonth(now.getMonth() - 6));
$('.input-daterange').datepicker({
format: "mm/dd/yy",
orientation: "top left",
autoclose: true,
todayHighlight: false,
toggleActive: false,
endDate: now,
startDate: sixmonthsago
});
I didint test the code.

How could I add a dateformat of dd-mm-yy with my script of jQuery datepicker?

I tried adding dateFormat: "dd-mm-yy",
but then the rest of the functions just don't work.
Then I tried to change the format globally,
$.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
But it didn't work either.
I am using jquery-1.9.1, and jquery-ui-1.10.3.
$(document).ready(function formUi() {
var dateToday = new Date();
$("#datepicker-round-trip-1").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
maxDate: new Date(new Date($('datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday, maxDate: null });
}
else {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#datepicker-round-trip-2").datepicker("option", "minDate", newDate);
}
});
$("#datepicker-round-trip-2").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
minDate: new Date(new Date($('#datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-2").datepicker('option', { minDate: dateToday, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("datepicker-round-trip-1").datepicker("option", "maxDate", newDate);
}
});
});
The script just sets the datepicker's minDate to the last date selected in the previous date picker. Any help or guidance is appreciated :)
Try this: http://jsfiddle.net/MXstJ/ or http://jsfiddle.net/gc4nM/
Helpful link: http://jqueryui.com/datepicker/
Hope this fits your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d',
dateFormat: 'dd-mm-yy',
defaultDate: new Date()
});

Categories