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
Related
$('#eventDate-container .input-group.date').datepicker({
weekStart: 1, // calendar starts on Monday
autoclose: true,
todayHighlight: true,
startDate: "4/10/2017", // disables all dates prior to this date
datesDisabled: ['01/01/1970', '12/31/2099'] // placeholder sample for possible future use
});
first i think that what you need is a "jquery" code not in "PHP"
, you can disable previous dates from jquery datepicker by using minDate: option
like :
var tardate = new Date("4/10/2017");
$("#eventDate-container").datepicker({
weekStart: 1, // calendar starts on Monday
autoclose: true,
todayHighlight: true,
minDate: tardate,
});
here's jsfiddle link
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"
});
I have 1 page that have 3 form in it, then my problem is my datepicker is working 1 only, the other make null result, how can I use this 3 date picker in 3 different form ?
here's my JS
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
just in case, I possible how can I make 3 datepick with different name ? (like date, date1 & date3)
in this 1 JS
instead of using var date_input=$('input[name="date"]');
add unique id to each datepicker and use above line like this
var date_input=$('#datepiker1, #datepickwer2, #datepicker3');
should work fine
try these
Try 1: if works that means your datepicker or datepiker1 has not yet been loaded
setTimeout(function(){
var date_input=$('#datepiker1, #datepickwer2, #datepicker3');
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
});
}, 500);
try 2:
$("#datepiker1").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
$("#datepiker2").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
$("#datepiker3").datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
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);
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()
});