3

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. enter image description here

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> 
2
  • What error is in the console? Sep 23, 2018 at 20:20
  • There no error in the console
    – ShapCyber
    Sep 24, 2018 at 6:37

2 Answers 2

1

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});
    }
});

enter image description here

7
  • I have tried it replace jQuery by $ same still not working.
    – ShapCyber
    Sep 23, 2018 at 19:57
  • can you update the post with your phtml code, I am looking at it now Sep 23, 2018 at 20:20
  • post updated, I have added the theme view.phtml
    – ShapCyber
    Sep 24, 2018 at 6:56
  • ok, it does work for me now. good luck Sep 24, 2018 at 19:46
  • How do you get it to work i have tried your code is not working.
    – ShapCyber
    Sep 24, 2018 at 20:07
0

Here is my solution

Product Attributes

Customizable Options -> Custom options let customers choose the product variations they want.

Instead of selecting Option Type As Date I selected Field.

In the browser I figure out that the Field Name is "options[4]"

Then in my Theme view.phtml I added below code.

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

$("input[name='options[4]']").calendar({beforeShowDay: unavailable});

});
});

</script>  

Wao! it work like charm.

My plugin work on both custom and main store order.

Thank you @Herve Tribouilloy for your response, but your idea didn't cut it.

1
  • np, some days are good, some are not as good, anyway, I have put down a public repository with a self contained plugin that uses my code. Please do comment if it cuts it or not, thanks. see repo at bitbucket.org/magstaging/calendar Nov 17, 2018 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.