2

Backend:

enter image description here

frontend

1.app/code/companyname/vendorname/view/frontend/web/template/delivery-date-block.html

<div id="delivery_datetime">
<label class="label">Delivery Date</label>
<div class="control">
    <input class="input-text" type="text" data-bind="datepicker: true"   name="delivery_date" id="delivery_date" readonly="true"/>
</div>
<label class="label">Delivery Time</label>
<div class="control">
    <select  name="delivery_time" id="delivery_time" class="select"data-bind=" "></select>
</div>
<label class="label">Comment</label>
<div class="control">
    <textarea name="delivery_comment" id="delivery_comment"></textarea>
</div>
<br/>
</div>
  1. app/code/companyname/vendorname/view/frontend/web/template/delivery-date-block.js

         define([
        'jquery',
        'ko',
        'uiComponent'
    ], function ($, ko, Component) {
        'use strict';
    console.log('its working');
     console.log(window.checkoutConfig.shipping.delivery_date.enable); 
        return Component.extend({
            defaults: {
                template: 'companyname_vendorname/delivery-date-block'
            },
            initialize: function () {
                this._super();
                var enable = window.checkoutConfig.shipping.delivery_date.enable;
                var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
                var noday = window.checkoutConfig.shipping.delivery_date.noday;
                var hourMin = parseInt(window.checkoutConfig.shipping.delivery_date.hourMin);
                var hourMax = parseInt(window.checkoutConfig.shipping.delivery_date.hourMax);
                var format = window.checkoutConfig.shipping.delivery_date.format;
                if(enable == 0){   // here i used a condition
                  $('#delivery_datetime').hide();
                }
                else{
                if(!format) {
                    format = 'yy-mm-dd';
                }
                var disabledDay = disabled.split(",").map(function(item) {
                    return parseInt(item, 10);
                });
                ko.bindingHandlers.datepicker = {
                    init: function (element, valueAccessor, allBindingsAccessor) {
                        var $el = $(element);
                        //initialize datetimepicker
                        if(noday) {
                            var options = {
                                minDate: 0,
                                dateFormat:format,
                                hourMin: hourMin,
                                hourMax: hourMax
                            };
                        } else {
                            var options = {
                                minDate: 0,
                                dateFormat:format,
                                hourMin: hourMin,
                                hourMax: hourMax,
                                beforeShowDay: function(date) {
                                    var day = date.getDay();
                                    if(disabledDay.indexOf(day) > -1) {
                                        return [false];
                                    } else {
                                        return [true];
                                    }
                                }
                            };
                        }
    
                        $el.datepicker(options);
    
                        var writable = valueAccessor();
                        if (!ko.isObservable(writable)) {
                            var propWriters = allBindingsAccessor()._ko_property_writers;
                            if (propWriters && propWriters.datetimepicker) {
                                writable = propWriters.datetimepicker;
                            } else {
                                return;
                            }
                        }
                        writable($(element).datepicker("getDate"));
                    },
                    update: function (element, valueAccessor) {
                        var widget = $(element).data("DatePicker");
                        //when the view model is updated, update the widget
                        if (widget) {
                            var date = ko.utils.unwrapObservable(valueAccessor());
                            widget.date(date);
                        }
                    }
                };
    
                return this;
            }
            }
    
        });
    });
    

output: enter image description here

Someone please help me to solve this issue

  • if((enable =='1') || (enable == 1)){$('#delivery_datetime').hide();} – Amit Bera Feb 22 at 8:01
  • I had the same issue so I reversed the condition to : if(enable != 0){ // here i used a condition // do stuff here } else{ $('#delivery_datetime').hide(); } – Amit Naraniwal Feb 22 at 8:38
  • if(enable == false){$('#delivery_datetime').hide();} – magefms Feb 22 at 9:01
  • I already tried it reverse its not happen @Amit Naraniwal – divya sekar Feb 22 at 9:22
  • try : if(enable){ //do stuff here } else{ $('#delivery_datetime').hide(); } Most probably it will work. – Amit Naraniwal Feb 22 at 9:26
2

app/code/companyname/vendorname/view/frontend/web/template/delivery-date-block.js

Add following method


isVisible: function () {
    var enabled = parseInt(window.checkoutConfig.shipping.delivery_date.enabled);
    return enabled;
}

Whole class looks like:


define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';
    console.log('its working');
    console.log(window.checkoutConfig.shipping.delivery_date.enable);
    return Component.extend({
        defaults: {
            template: 'companyname_vendorname/delivery-date-block'
        },
        initialize: function () {
            this._super();
            var enable = window.checkoutConfig.shipping.delivery_date.enable;
            var disabled = window.checkoutConfig.shipping.delivery_date.disabled;
            var noday = window.checkoutConfig.shipping.delivery_date.noday;
            var hourMin = parseInt(window.checkoutConfig.shipping.delivery_date.hourMin);
            var hourMax = parseInt(window.checkoutConfig.shipping.delivery_date.hourMax);
            var format = window.checkoutConfig.shipping.delivery_date.format;
            if(enable == 0){   // here i used a condition
                $('#delivery_datetime').hide();
            }
            else{
                if(!format) {
                    format = 'yy-mm-dd';
                }
                var disabledDay = disabled.split(",").map(function(item) {
                    return parseInt(item, 10);
                });
                ko.bindingHandlers.datepicker = {
                    init: function (element, valueAccessor, allBindingsAccessor) {
                        var $el = $(element);
                        //initialize datetimepicker
                        if(noday) {
                            var options = {
                                minDate: 0,
                                dateFormat:format,
                                hourMin: hourMin,
                                hourMax: hourMax
                            };
                        } else {
                            var options = {
                                minDate: 0,
                                dateFormat:format,
                                hourMin: hourMin,
                                hourMax: hourMax,
                                beforeShowDay: function(date) {
                                    var day = date.getDay();
                                    if(disabledDay.indexOf(day) > -1) {
                                        return [false];
                                    } else {
                                        return [true];
                                    }
                                }
                            };
                        }

                        $el.datepicker(options);

                        var writable = valueAccessor();
                        if (!ko.isObservable(writable)) {
                            var propWriters = allBindingsAccessor()._ko_property_writers;
                            if (propWriters && propWriters.datetimepicker) {
                                writable = propWriters.datetimepicker;
                            } else {
                                return;
                            }
                        }
                        writable($(element).datepicker("getDate"));
                    },
                    update: function (element, valueAccessor) {
                        var widget = $(element).data("DatePicker");
                        //when the view model is updated, update the widget
                        if (widget) {
                            var date = ko.utils.unwrapObservable(valueAccessor());
                            widget.date(date);
                        }
                    }
                };

                return this;
            }
        },
        isVisible: function () {
            var enabled = parseInt(window.checkoutConfig.shipping.delivery_date.enabled);
            return enabled;
        }
    });
});

app/code/companyname/vendorname/view/frontend/web/template/delivery-date-block.html


<!-- ko if: isVisible() -->
    <div id="delivery_datetime">
        <label class="label">Delivery Date</label>
        <div class="control">
            <input class="input-text" type="text" data-bind="datepicker: true"   name="delivery_date" id="delivery_date" readonly="true"/>
        </div>
        <label class="label">Delivery Time</label>
        <div class="control">
            <select  name="delivery_time" id="delivery_time" class="select"data-bind=" "></select>
        </div>
        <label class="label">Comment</label>
        <div class="control">
            <textarea name="delivery_comment" id="delivery_comment"></textarea>
        </div>
        <br/>
    </div>
<!-- /ko -->
  • its working what i expected thanks @Sohel Rana – divya sekar Feb 23 at 5:42
  • I need a another help from you, how to i will show calendar icon with in the delivery date input field @sohel Rana – divya sekar Feb 23 at 5:55

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.