I'm working with datepicker from materializecss and I need to disabled all days unless the Monday, at other plugins I used 'daysOfWeekDisabled'
parameter but in this case I must to use disableDayFn: function(){} and when I insert a parameter all calendar is disabled. Here is an example
$('#initCourse').datepicker({
firstDay: 1,
minDate: new Date(),
format: "dd.mm.yyyy",
disableDayFn: function(){
return disabled = '0, 2, 3, 4, 5, 6'
}
});
Any idea? Thanks in advance
It worked fine, but I use another way in case you need to disable one or more dates
disableDayFn:function (date) {
let disableListDate = [new Date('2018,12,5').toDateString(),new Date('2018,12,6').toDateString()];
if(disableListDate.includes(date.toDateString())) {
return true
}else{
return false
}
}
Here's a working example.
disableDayFn has a parameter date which you can use to find every occurrency of a specific date.
disableDayFn: function(date) {
if(date.getDay() == 1) // getDay() returns a value from 0 to 6, 1 represents Monday
return false;
else
return true;
}
Related
I need to disable the first and third Wednesday in each month. The code I am using is below.This was working but when I added the new dates for 2021 it stopped working. Please help. Thanks
<script>
var dates = ["6-3-2019","20-3-2019","3-4-2019","17-4-2019","1-5-2019","15-5-2019","5-6-2019","19-6-2019","3-7-2019","17-7-2019","7-8-2019","21-8-2019","4-9-2019","18-9-2019","2-10-2019","16-10-2019","6-11-2019","20-11-2019","4-12-2019","18-12-2019","1-1-2020","15-1-2020","5-2-2020","19-2-2020","4-3-2020","18-3-2020","1-4-2020","15-4-2020","6-5-2020","20-5-2020","3-6-2020","17-6-2020","1-7-2020","15-7-2020","5-8-2020","19-8-2020","2-9-2020","16-9-2020","7-10-2020","21-10-2020","4-11-2020","18-11-2020","2-12-2020","16-12-2020","06-01-2021","20-01-2021","03-02-2021","17-02-2021","03-03-2021","17-03-2021","07-04-2021","21-04-2021","05-05-2021","19-05-2021","02-06-2021","16-06-2021","07-07-2021","21-07-2021","04-08-2021","18-08-2021","01-09-2021","15-09-2021","06-10-2021","20-10-2021","03-11-2021","17-11-2021","01-12-2021","15-12-2021"];
function DisableDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [dates.indexOf(string) == -1];
}
$(function() {
$("#datepicker2").datepicker({
beforeShowDay: DisableDates,
minDate: +1
});
});
</script>
I am using ion2-calendar in ionic 3, currently, it's allowing to select day starts from today and not previous. I want to select previous days also Please help in this.
I am using the following code,
optionsRange: CalendarComponentOptions = {
pickMode: 'range',
disableWeeks: [0, 6],
};
Thanks in advance
You can see previous dates by adding canBackwardsSelected: true to the const options: CalendarModalOptions then the code will be as follows using Ionic ModalController.
openCalendar() {
const options: CalendarModalOptions = {
title: 'BASIC',
canBackwardsSelected: true, //By making this true you can access the disabled dates
};
let myCalendar = this.modalCtrl.create(CalendarModal, {
options: options
});
myCalendar.present();
myCalendar.onDidDismiss((date: CalendarResult, type: string) => {
console.log(date);
})
}
Then you just have to call openCalendar() from a button click at the HTML end to see enabled past dates.
edit your ts file this will select date between from and to only not after or before
test: DayConfig[]=[];
public optionsRange: CalendarComponentOptions = {
//from: new Date(2019, 0, 1),
from: new Date(2019, 11, 1),
to: new Date(2020, 2, 15),
pickMode: 'range',
daysConfig: this.test
};
I already have functioning code in jQueryUiDatepicker that disables Fridays and Saturdays and all previous days (plus 2 days). My issue is trying to add 2 specific dates to this existing Datepicker code that will also disable these dates.
This is my existing code on starting line 92 in jQueryUiDatepicker:
beforeShowDay: function(date) {
var show = true;
if(date.getDay()==5||date.getDay()==6) show=false
return [show];
},
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
},
I am trying to disable 18th and 19th October 2017 and failing, this is the code I have added directly underneath the above code:
beforeShowDay: var array = ['18/10/2017', '19/10/2017']
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [ array.indexOf(string) == -1 ]
},
My question is how can I disable all previous dates, all Fridays and Saturdays and these 2 dates in the October?
Note# This coding has to be done in jquery.ui.datepicker, not a script in html
Hope this helps
use inArray instead of indexOf and you can also disable all previous dates using minDate
var array = ["18/10/2017", "19/10/2017"];
$(function() {
$('input').datepicker({
minDate: new Date(),
beforeShowDay: function (date) {
$thisDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
var day = date.getDay();
if ($.inArray($thisDate, array) == -1&&day!=5&&day!=6) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
DEMO
I've been using this DateTime picker on a section of my website, I have a schedule per week which has a start and end time depending on the day of the week and I wanted to disable the time that was out of the schedule range and that includes minutes, what was my surprise? I couldn't find any documentation about disabling minutes. I decided to change the DateTime plugin for another one but I would have to change all the code that I already have. so I came back to [eonasdan-datetimepicker] Is there any way to get this done? I'm able of disabling hours successfully but I'm talking about minutes.
You could use the option disabledTimeIntervals but this only work for specific dates (moments), then you must specify the interval for each available day. I did something like this:
var addingColacionInterval = function (disabledTimeIntervals, currDate) {
var intervalsPerDay = {
1: { //1-7 where 1 is Monday and 7 is Sunday
startHour:15,
startMinute: 40,
durationInMinutes: 30
},
2: {
startHour:8,
startMinute: 20,
durationInMinutes: 50
}
// etc
}
var intervalForWeekDay = intervalPerDay[currDate.isoWeekday()]; //.isoWeekday(); // returns 1-7 where 1 is Monday and 7 is Sunday
var initialTime = currDate.clone().set({ hour: intervalForWeekDay.startHour, minute: intervalForWeekDay.startMinute });
disabledTimeIntervals.push([initialTime, initialTime.clone().add(parseInt(intervalForWeekDay.durationInMinutes), 'minutes')]);
}
var minDate = moment("the min selectable date");
var maxDate = moment("the max allowed date");
//for disable colación minutes intervals we can't use disableHours because don't work with minutes disabledTimeIntervals doesn't work for all days (like, but you have to loop trought
var disabledTimeIntervals = [];
var currDate = minDate.clone().startOf('day');
var lastDate = maxDate.clone().endOf('day');
do {
addingColacionInterval(disabledTimeIntervals, currDate);
} while (currDate.add(1, 'days').diff(lastDate) < 0);
var disabledHours = [0, 1, 2, 3, 4, 5, 6, 7, 23];
$scope.disableDays = [];
if ($scope.import.disableSunday) {
$scope.disableDays = [0];
}
//
$scope.dateSecOptions = {
minDate: minDate.format('YYYY-MM-DD'),
maxDate: maxDate.format('YYYY-MM-DD'),
disabledHours: disabledHours,
disabledTimeIntervals: disabledTimeIntervals,
stepping: 10,
};
in contrast with disabledTimeIntervals also exist the option disabledHours which allow you to disable hours for all available (selectable) days in the calendar widget.
what exactly do you want? like for example just allowing users to select specific times like just half hour [30] or whole hour? [00] because if that is the case, you can use the stepping function, what it does is that when users select the up or down arrow, the minutes advance as much as you choose, for example 30 minutes:
$(document).ready(function () {
$('#datetimepicker4').datetimepicker({
stepping:30
});
});
I'm really just looking to assign additional information to dates. I am currently setting up datepicker with the following:
beforeShowDay: function(date){
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, ajaxDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
},
Where ajaxDates is an array containing a list of available dates such as:
var ajaxDates = [ "26-2-2015", "27-2-2015"];
It's for a booking system were I have another array containing the number of seats available for every date. I had seen a post that I can no longer find were someone was attaching additional information to the dates. If someone could point me in the right direction that would be great!
Edit: I have noticed that the a title is attached to each date which on hover shows the tooltip as "Available" or "Unavailable". Is there any easy method to access through the datepicker?
The solution that I was referring to was:
Add custom parameter to jQuery UI Datepicker
An example of how to set additional parameters is as followed:
var input = $("#datepicker");
var result = $("#result");
var courses = {
"02-09-2013" : "history",
"10-09-2013": "physics"
};
input.datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
firstDay: 1,
numberOfMonths: 3,
onSelect: function(dateText, pickerObj){
result.attr("data-course-id", courses[dateText]);
course.innerHTML = courses[dateText];
},
altField: "#result"
});
http://jsfiddle.net/Seandeburca/qbLwD/