Magento 2 – Disable Array of Days in Calendar Not Working on Product View Page

calendarmagento2

In my custom Module I am able to disable array of days using this code in viewproduct.phtml

<script>
require(["jquery", "mage/calendar"], function($){
$(document).ready(function(){
var unavailableDates = ["12-01-2019","19-01-2019","29-01-2019"];
    function unavailable(date) 
{
var string = $.datepicker.formatDate('dd-mm-yy',date);
return [unavailableDates.indexOf(string) == -1];
}

$("#options_4_date").calendar({beforeShowDay: unavailable});

});
});

</script>

However I added same code in my Theme Magento_Catalog/templates/product/view.phtml to work with product options choosing date is not working.

Any Idea or I am not doing it correct.

Here is my theme view.phtml

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>

<?php
    $_config = $this->helper('Magetheme\Custom\Helper\Data');
?>

<div class="row">
    <div class="col-lg-6 col-md-6 image-box-detail">
        <?php echo $block->getChildHtml('product.info.media'); ?>
    </div>

    <div class="col-lg-6 col-md-6 info-box-detail">
        <?php echo $block->getChildHtml('product.info.main'); ?>
        <div class="social-detail">
            <!-- Go to www.addthis.com/dashboard to customize your tools -->
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-548a6c0340f6f753" async="async"></script>
            <!-- Go to www.addthis.com/dashboard to customize your tools -->
            <div class="share-title"><?php echo __('Share')?></div><div class="addthis_sharing_toolbox"></div>
        </div>
    </div>

    <div class="col-lg-12 col-md-12 detail-bottom-wrapper">
        <?php echo $block->getChildHtml('detail.bottom'); ?>
    </div>

    <?php
        $related = $block->getChildHtml('related.product');
        $upsell = $block->getChildHtml('upsell.product');
        //var_dump($upsell);
    ?>


    <?php if($_config->getProductDetail('show_related') || $_config->getProductDetail('show_upsell')){?>                
    <div class="col-lg-12 col-md-12 box-related-upsell">
        <?php if($_config->getProductDetail('show_related')){?>
            <div class="block product-details box-related">
                <div class="block-title">
                    <strong><?php echo __('Related Products')?></strong>
                </div>
                <?php echo $block->getChildHtml('related.product'); ?>
            </div>
        <?php }?>
        <?php if($_config->getProductDetail('show_upsell')){?>
            <div class="block product-details box-up-sell">
                <div class="block-title">
                    <strong><?php echo __('Upsell Products')?></strong>
                </div>
                <?php echo $block->getChildHtml('upsell.product'); ?>
            </div>
        <?php }?>

    </div>
    <?php } ?>  
</div>
<script>
require(["jquery", "mage/calendar"], function($){
$(document).ready(function(){
var unavailableDates = ["12-01-2019","19-01-2019","29-01-2019"];
    function unavailable(date) 
{
var string = $.datepicker.formatDate('dd-mm-yy',date);
return [unavailableDates.indexOf(string) == -1];
}

$("#options_4_date").calendar({beforeShowDay: unavailable});

});
});

</script>

Best Answer

Ok, I am not sure I am understanding exactly what you are trying to do to be honest..

However, in terms of javascript integration with Magento 2, I think the below may help:

in your phtml, I'd expect options_4_date to be a html element. And in Magento 2, we need the script to be using the json type declaration I put below. the notation "Mbs_TryACalendarInput/js/calendar" means the javascript file location is in a view/frontend/web directory of a module but you can also use a theme location.

<div id="options_4_date">
    this is a calendar placeholder
</div>

<script type="text/x-magento-init">
    {
      "#options_4_date": {
        "Mbs_TryACalendarInput/js/calendar": {

        }
      }
    }
</script>

Finally, the below is the translation of your snippet. Unfortunately, I have not tested end to end my script but that should be close to where you want to go

define([
    'jquery',
    'mage/calendar'
], function ($) {
    'use strict';

    var unavailableDates = ["03-09-2018","09-09-2018","11-09-2018"];
    function unavailable(date) {
       var string = $.datepicker.formatDate('dd-mm-yy',date);
       return [unavailableDates.indexOf(string) == -1];
    }

    return function (config, element) {
       $(element).calendar({beforeShowDay: unavailable});
    }
});

Related Solutions

Calendar Control in Checkout Page in Magento 2

Simply add data bind to input field following way.

<input data-bind="datepicker: true" />

Change js code for Learning/AdditionalShippingBlock/view/frontend/web/js/view/checkout/shipping/additional-block.js

define([
    'jquery',
    "underscore",
    'ko',
    'uiComponent',
    'mage/calendar'
], function ($, _, ko, Component, calendar) {
    'use strict';
    var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
    return Component.extend({
        defaults: {
            template: 'Learning_AdditionalShippingBlock/checkout/shipping/additional-block'
        },
        initialize: function () {
            this._super();
            ko.bindingHandlers.datepicker = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    var $el = $(element);

                //initialize datepicker with some optional options
                var options = { minDate: 0
                };
                $el.datepicker(options);

                var writable = valueAccessor();
                if (!ko.isObservable(writable)) {
                    var propWriters = allBindingsAccessor()._ko_property_writers;
                    if (propWriters && propWriters.datepicker) {
                        writable = propWriters.datepicker;
                    } else {
                        return;
                    }
                }
                writable($(element).datepicker("getDate"));

            },
            update: function(element, valueAccessor)   {
                var widget = $(element).data("DateTimePicker");
                //when the view model is updated, update the widget
                if (widget) {
                    var date = ko.utils.unwrapObservable(valueAccessor());
                    widget.date(date);
                }
            }
        };

        return this;
    },
    canVisibleBlock: show_hide_custom_blockConfig
});

});

Magento – adding calendar on form field in magento 2 not working error 404

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>

Best Answer

Related Solutions

Calendar Control in Checkout Page in Magento 2

Magento – adding calendar on form field in magento 2 not working error 404

Related Topic