Bootstrap - Datepicker/Disable specific dates from array - javascript

I have a array with dates. I want to loop this array and disable selectable dates in datepicker control. I need to do this in beforeShowDay parameter!
This is my code:
var datesForDisable = ["25-01-2017", "26-01-2017", "27-01-2017"]
$("#holidayDateFrom").datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
//daysOfWeekDisabled: [0, 6],
beforeShowDay: function (currentDate) {
var dayNr = currentDate.getDay();
if (dayNr == 6) {//This works
return false;
}
if (dayNr == 0) {//This works
return false;
}
// This dosnt works..
var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
if (datesForDisable.length > 0) {
for (var i = 0; i < datesForDisable.length; i++) {
var date = new Date(datesForDisable[i]);
if (date == dateNr) {
return false;
}
}
}
return true;
}
})
How to do this? Thank you previously!


You can compare the dates as timestamp(unix time)
var datesForDisable = ["25.01.2017", "26.01.2017", "27.01.2017"]
$("#datepicker").datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
weekStart: 1,
calendarWeeks: true,
todayHighlight: true,
//datesDisabled: datesForDisable,
//daysOfWeekDisabled: [0, 6],
beforeShowDay: function (currentDate) {
var dayNr = currentDate.getDay();
var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
if (dayNr == 6) {//This works
return false;
}
if (dayNr == 0) {//This works
return false;
}
if (datesForDisable.length > 0) {
for (var i = 0; i < datesForDisable.length; i++) {
if (moment(currentDate).unix()==moment(datesForDisable[i],'DD.MM.YYYY').unix()){
return false;
}
}
}
return true;
}
})


datesDisabled: datesForDisable
I am not sure why you comment this option. As per your question, This option is providing the same thing you are look for. Take a look:
http://jsfiddle.net/CxNNh/4056/
Its worked perfect for me
var datesForDisable = ["03-04-2019", "03-09-2019", "03-15-2019"];
$(document).ready(function () {
$('.datepicker').datepicker({
multidate: true,
format: 'mm-dd-yyyy',
todayHighlight: false,
datesDisabled: datesForDisable,
multidateSeparator: ', ',
templates : {
leftArrow: '<i class="fi-arrow-left"></i>',
rightArrow: '<i class="fi-arrow-right"></i>'
}
});
});

Related

loop available dates, select one of them and fill the input box

I am trying to fill in the input that is normally filled by a js code inside the html:
<input type="text" readonly="" class="form-control-input app_date validate" style="width: 260px;" id="app_date" name="app_date" placeholder="YYYY-MM-DD" onchange="this.form.submit();showLoader();" value="" autocomplete="off">
js code got from html
import re
html = """
<script type="text/javascript">
var dt4 = '2019-03-07';
var blocked_dates = ["20-03-2019","01-01-1970","28-03-2019","29-03-2019","20-03-2019","01-01-1970","28-03-2019","29-03-2019"];
var available_dates = ["07-03-2019","08-03-2019","11-03-2019","12-03-2019","13-03-2019","14-03-2019","15-03-2019","18-03-2019","19-03-2019","21-03-2019","22-03-2019","25-03-2019","26-03-2019","27-03-2019"];
var fullCapicity_dates = [];
var offDates_dates = ["09-03-2019","10-03-2019","16-03-2019","17-03-2019","20-03-2019","23-03-2019","24-03-2019","28-03-2019","29-03-2019","30-03-2019","31-03-2019"];
var allowArray = [1];
</script>
"""
i successfully captured the available dates :
date_list = re.findall(r'var\s*available_dates\s*=\s*\[[^\]]+', html)
if date_list:
for av_date in re.findall(r"\"[0-9\-]+\"",date_list[0]) :
print(av_date.replace('"',''))
Break
else : print("no available dates")
output :
07-03-2019 08-03-2019 11-03-2019 12-03-2019 13-03-2019 14-03-2019
15-03-2019 18-03-2019 19-03-2019 21-03-2019 22-03-2019 25-03-2019
26-03-2019 27-03-2019
I don't know how to loop the availables dates , select one of them and fill the input and continue the py script. if no available dates keep refreshing the current page until available dates are found. i am confused is it a while loop, a while true or if ?
full js code
<script type="text/javascript">
var today = new Date();
var dd = today.getDate()+1;
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
var today = yyyy+'-'+mm+'-'+dd;
function formatDate(rawDate) {
var day = ("0" + rawDate.getDate()).slice(-2);
var month = ("0" + (rawDate.getMonth() + 1)).slice(-2);
return (day)+ "-" + (month)+ "-" +rawDate.getFullYear() ;
}
$(document).ready(function() {
var dt1 = '2019-03-06';
var checkService = 'Normal';
$('#dateOfBirth').datepicker({
format: "yyyy-mm-dd",
endDate: new Date(dt1),
startDate: '-100y',
autoclose: true,
startView: 2
});
$('#pptIssueDate').datepicker({
format: "yyyy-mm-dd",
endDate: new Date(dt1),
startDate: '-100y',
autoclose: true,
startView: 2
});
$('#pptExpiryDate').datepicker({
format: "yyyy-mm-dd",
startDate: new Date(dt1),
autoclose: true,
startView: 2
});
var dt4 = '2019-03-07';
var blocked_dates = ["20-03-2019","01-01-1970","28-03-2019","29-03-2019","20-03-2019","01-01-1970","28-03-2019","29-03-2019"];
var available_dates = ["07-03-2019","08-03-2019","11-03-2019","12-03-2019","13-03-2019","14-03-2019","15-03-2019","18-03-2019","19-03-2019","21-03-2019","22-03-2019","25-03-2019","26-03-2019","27-03-2019"];
var fullCapicity_dates = [];
var offDates_dates = ["09-03-2019","10-03-2019","16-03-2019","17-03-2019","20-03-2019","23-03-2019","24-03-2019","28-03-2019","29-03-2019","30-03-2019","31-03-2019"];
var allowArray = [1];
if(checkService == 'Normal')
{
/*if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1'))
{
var classFull = 'fullcapspecial';
var tooltipTitle = ' ';
var backDatetitle = 'Not Allowed';
}else{
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}*/
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}else{
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}
$('.app_date').datepicker({
language: "en",
Default: true,
format: "yyyy-mm-dd",
startDate: new Date(dt4),
endDate: '2019-03-31',
autoclose: true,
forceParse:true,
startView: 0,
beforeShowDay: function(date){
var formattedDate = formatDate(date);
if ($.inArray(formattedDate.toString(), blocked_dates) != -1){
return {
enabled : false,
classes: 'inactiveClass',
tooltip: 'Holiday'
};
}
if ($.inArray(formattedDate.toString(), available_dates) != -1){
return {
enabled : true,
classes: 'activeClass',
tooltip: 'Book'
};
}
if ($.inArray(formattedDate.toString(), fullCapicity_dates) != -1){
return {
enabled : false,
classes: classFull,
tooltip: tooltipTitle
};
}
if ($.inArray(formattedDate.toString(), offDates_dates) != -1){
return {
enabled : false,
classes: 'offday',
tooltip: 'Off Day'
};
}
return {
enabled : false,
tooltip: backDatetitle
};
return;
}
});
/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/
if(checkService == 'Normal')
{
if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1'))
{
/*$(document).on('click', '.fullcap,.fullcapspecial', function () {
$(".datepicker").hide();
$('.popupBG').show();
$('#IDBodyPanel').show();
});
$(".popupCloseIcon").click(function() {
$(".popupBG").hide();
$("#IDBodyPanel").hide();
});
$('input[type=radio][name=serviceChange]').change(function() {
if (this.value == 'Premium') {
$("#premiumService").prop('value', 'GO FOR PREMIUM');
}
else if (this.value == 'Prime') {
$("#premiumService").prop('value', 'GO FOR PRIME TIME');
}
});*/
}
}
/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/
var eventhandler = function(e) {
e.preventDefault();
}
if (checkService == 'Premium' || checkService == 'Prime') {
$('input[name="vasId[]"]:checked').each(function() {
$("#vasId"+this.value).bind('click', eventhandler);
});
}
if (checkService != 'Premium')
{
$(document).on('click', '.chkbox', function () {
if($(this).val() == 1)
{
if($(this).is(":checked")){
//$("#vasId6").prop('checked', true);
//$("#vasId6").bind('click', eventhandler);
}else{
//$("#vasId6").prop('checked', false);
//$("#vasId6").unbind('click', eventhandler);
}
}
});
}
});
</script>

I have problem with datepicker dateDisnable

I hava a problem with use datepicker bootstrap v1.5.0
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.checkin').datepicker({
todayHighlight:'TRUE',
autoclose: true,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
datesDisabled :test,
}).on('changeDate', function(ev) {
$(this).datepicker('hide');
if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf()
|| !checkout.datepicker("getDate").valueOf()) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate() + 1);
checkout.datepicker("update", newDate);
}
});
var checkout = $('.checkout').datepicker({
beforeShowDay: function(date) {
if (!checkin.datepicker("getDate").valueOf()) {
return date.valueOf() >= new Date().valueOf();
} else {
return date.valueOf() > checkin.datepicker("getDate").valueOf();
}
},
autoclose: true,
datesDisabled :daylist,
}).on('changeDate', function(ev) {});
when I choose date of my checkin input, my checkout input not display, but when i press tab and click again, it display and with error
enter image description here

It appears you may have syntax errors:
remove comma ","
datesDisabled :test,
datesDisabled :test
and also here:
datesDisabled :daylist,
datesDisabled :daylist

After choose time I get undefined

After I choose a time and submit a form, I get undefine
When I open console, there aren't any error.
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 30,
minTime: '10',
maxTime: '3:00pm',
startTime: '10:00',
dynamic: true,
dropdown: true,
scrollbar: true
});
$(function () {
$("#datepicker").datepicker({
minDate: +1, maxDate: "+3M"
});
});
$(document).ready(function () {
var appointmentTime = document.getElementById('datepicker').value;
var splitData = "";
if (appointmentTime.indexOf("") > 0) {
splitData = appointmentTime.split(" ");
}
else {
splitData = appointmentTime.split("T");
}
var time = splitData[1].substring(0, 5);
if (time.slice(-1) == ":") {
time = time.substring(0, time.length - 1);
}
var amPmTime = splitData[2];
$('#datepicker').attr('value', splitData[0]);
$('#timepicker').attr('value', time + ' ' + amPmTime);
});
And in my field I get something like this:
Image
Any idea what could be problem ?

Disable days in Datepicker

I'm trying to disable certain days of the calendar, but I can not.
I'm using this datepicker https://github.com/eternicode/bootstrap-datepicker/blob/master/docs/index.rst.
The javascript code I have is this, I work all I need except the days you want to disable.
var disabledDays = ['11/29/2013', '11/27/2013', '11/28/2013'];
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return [false, ''];
}
}
return [true, ''];
}
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true,
autoclose: true,
weekStart: 1,
startDate: '0d',
language: 'es',
beforeShowDay: daysDisabled
})

just modify your function like this:
function daysDisabled(date) {
for (var i = 0; i < disabledDays.length; i++) {
if (new Date(disabledDays[i]).toString() == date.toString()) {
return false;
}
}
return true;
}

Created Fiddle for you.
Working Fiddle
function initComponent(){
/* Date retrait */
$("#dateRetrait").datepicker({
dateFormat: 'dd-mm-yy',
minDate: new Date(),
beforeShowDay: function(d) {
var dmy = (d.getMonth()+1);
if(d.getMonth()<9)
dmy="0"+dmy;
dmy+= "-";
if(d.getDate()<10) dmy+="0";
dmy+=d.getDate() + "-" + d.getFullYear();
console.log(dmy+' : '+($.inArray(dmy, disbleddates)));
if ($.inArray(dmy, disbleddates) != -1) {
return [false, "","Available"];
} else{
return [true,"","unAvailable"];
}
}
});

Disable custom dates in jquery datepicker

I'm trying to disable certain dates from a Jquery UI datepicker calendar.
My problem is that only the last date checked by disableDays function is disabled, not all of them. Why it disables only the last checked date. Should I return a different response from this function ?
Full script:
var disabled_days = new Array(); // Array of Date() objects
$('.date-picker-day').live('click', function () {
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'dd',
beforeShow: function () {
[..]
},
beforeShowDay: disableDays,
onClose: function (dateText, inst) {
}
}).focus();
});
function disableDays(date) {
var ret = false;
$.each(disabled_days, function (k, v) {
if (v.getDate() == date.getDate()) {
console.log(v + 'vs.' + date + ' invalid');
ret = [false];
} else {
ret = [true];
}
});
return ret;
}

You need to stop further iterations of the disabled_days array as soon as a negative match is found, else in the next value iteration the date will not match and ret will again get true value
function disableDays(date) {
var ret = false;
$.each(disabled_days, function (k, v) {
if (v.getDate() == date.getDate()) {
console.log(v + 'vs.' + date + ' invalid');
ret = [false];
return false;
} else {
ret = [true];
}
});
return ret;
}
Demo: Fiddle

Categories

Resources