disabling specific dates from html datepicker jquery

Question

hey guys i am trying to set a datepicker in my webpage and disable some dates from it so it can't be showing
this is the code:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>

        <link href="jquery-ui/jquery-ui.css" rel="stylesheet">
        <script src="jquery-ui/external/jquery/jquery.js" ></script>
        <script src="jquery-ui/jquery-ui.js"></script>

        <script>

            /** Days to be disabled as an array */
            var disableddates = ["20-5-2015", "12-11-2014", "12-25-2014", "12-20-2014"];

            function DisableSpecificDates(date) {

                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();

                // First convert the date in to the mm-dd-yyyy format 
                // Take note that we will increment the month count by 1 
                var currentdate = (m + 1) + '-' + d + '-' + y;

                // We will now check if the date belongs to disableddates array 
                for (var i = 0; i < disableddates.length; i++) {

                    // Now check if the current date is in disabled dates array. 
                    if ($.inArray(currentdate, disableddates) != -1) {
                        return [false];
                    }
                }
            }

            $(function () {
                $("#date").datepicker({
                    beforeShowDay: DisableSpecificDates
                });
            });
        </script>
    </head>

    <body>
        <input id="date" type="text">
    </body>
</html>

but it is not working for some reason... the date picker don't even show can someone plz help

Please, post the javascript error that appears on your console. Did you try to use the Developer Tools in Chrome or something similar? — Fabiano
– Fabiano, Commented May 19, 2015 at 16:56

Thomas Theunen · Accepted Answer · 2015-05-19 17:39:14Z

19

Try this, run this code below. The first date I added a 0 to the day so that it will match the formatting in the comparison.

/** Days to be disabled as an array */
var disableddates = ["20-05-2015", "12-11-2014", "12-25-2014", "12-20-2014"];


function DisableSpecificDates(date) {
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [disableddates.indexOf(string) == -1];
  }
  /*
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();

// First convert the date in to the mm-dd-yyyy format 
// Take note that we will increment the month count by 1 
var currentdate = (m + 1) + '-' + d + '-' + y ;

// We will now check if the date belongs to disableddates array 
for (var i = 0; i < disableddates.length; i++) {

// Now check if the current date is in disabled dates array. 
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];

}
}

}*/


$(function() {
  $("#date").datepicker({
    beforeShowDay: DisableSpecificDates
  });
});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</head>

<body>

  <input id="date" type="text">


</body>

</html>

edited May 19, 2015 at 17:39

Thomas Theunen

1,2749 silver badges13 bronze badges

answered May 19, 2015 at 17:20

Allen Tellez

1,2111 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Omer Aslam Over a year ago

this does not even open datepicker

enigma · Accepted Answer · 2017-02-05 17:22:12Z

0

This answer is based on Thomas' answer, here I have added noweekends functionality to DisableSpecificDates function in PrepareDate, to use in beforeShowDay like: beforeShowDay:PrepareDate

function DisableSpecificDates(date) {
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [disableddates.indexOf(string) == -1];
    }
    function PrepareDate(date){
    if ($.datepicker.noWeekends(date)[0]) {
    return DisableSpecificDates(date);
    } else {
    return $.datepicker.noWeekends(date);
    }
}

edited Feb 5, 2017 at 17:22

enigma

3,5012 gold badges19 silver badges31 bronze badges

answered Feb 5, 2017 at 15:44

Shocked

13 bronze badges

Comments

Pullat Junaid · Accepted Answer · 2017-04-14 04:57:30Z

0

Disabled Days of the Week

<div class="container">
    <div class="col-sm-6" style="height:130px;">
        <div class="form-group">
            <div class='input-group date' id='datetimepicker11'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar">
                    </span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker11').datetimepicker({
                daysOfWeekDisabled: [0, 6]
            });
        });
    </script>
</div>

answered Apr 14, 2017 at 4:57

Pullat Junaid

3,3923 gold badges27 silver badges25 bronze badges

Collectives™ on Stack Overflow

disabling specific dates from html datepicker jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related