Magento 2 – Disable Previous Days in Default Calendar

Have not done this myself, so this is a guide to get you in the right direction.

the calendar used by magento is located here : /js/calendar/calendar.js, and from its header comments, you will find it is done by http://www.dynarch.com/, and the docs is located here : http://www.dynarch.com/jscal

You will see there is built in functionality (via a callback) to disable dates. (http://www.dynarch.com/jscal/#sec8)

You can also disable individual dates by supplying a callback function which receives a JS date object and returns true if that date must be disabled, or false otherwise. .....suppose you have in your database a list of dates that should be disabled, just convert them to numeric value and build up a hash table, then your disabled() handler can very conveniently return true for them:

(sound just like what you want/have ;) )

var DISABLED_DATES = {
    20090502: true,
    20090505: true,
    20090510: true,
    20090511: true
};
Calendar.setup({
    cont     : "sample3",
    disabled : function(date) {
        date = Calendar.dateToInt(date);
        return date in DISABLED_DATES;
    }
});

To extend magento calendar creation, you need to create your own class, which extends the core Varien_Data_Form_Element_Date class, which will allow you to adjust the setup for the calendar, and include your dates. You will need to override the getElementHtml() method, which contains the calandar setup script code.

$html .= sprintf('
            <script type="text/javascript">
            //<![CDATA[
                Calendar.setup({
                    inputField: "%s",
                    ifFormat: "%s",
                    showsTime: %s,
                    button: "%s_trig",
                    align: "Bl",
                    singleClick : true
                });
            //]]>
            </script>',
            $this->getHtmlId(), $displayFormat,
            $this->getTime() ? 'true' : 'false', $this->getHtmlId()
        );

and include the callback and dates you have, as per the calendar docs.

I am not sure how you are displaying the calendars in your site, but one way to use the custom class in a form is to create a custom form element as such:

$this->getForm()->addType('customDate','ProxiBlue_GiftPromo_Data_Form_Element_Date');

Hope this helps you in the right direction.

ok... so the last idea I came up with was to include the following script inside .phtml file, and not use the data-mage-init attribute anymore:

<form action="" method="POST">
        <label for="name">Name: </label>
        <input type="text" id="name" name="name"/><br>
....
        <label for="birthdate">Birth date: </label>
        <input type="text" id="birthdate" name="birthdate"/><br>
</form>
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function($){

            $("#birthdate").calendar({
                showTime: false,
                //dateFormat: "yy-mm-dd"
            });
        });
    </script>