2

I need a datepicker for every product item that i have in checkout. Below is my code for js file:

/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/*jshint browser:true jquery:true*/
/*global alert*/
define(
[
'ko',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/quote',
'uiComponent'
],
function (ko,priceUtils,quote,Component) {
    "use strict";
    return Component.extend({
        defaults: {
            template: 'Vendor_Module/scheduling/item/details'
        },
        getValue: function(quoteItem) {
            return quoteItem.name;
        },
        getFormattedPrice: function (price) {
            return priceUtils.formatPrice(price, quote.getPriceFormat());
        },
    });

    ko.bindingHandlers['datepicker'] = {
        'init': function(element, valueAccessor, allBindingsAccessor) {
            /* Initialize datepicker with some optional options */
            var options = allBindingsAccessor().datePickeroptions || {},
            prop = valueAccessor(),
            $elem = $(element);

            prop($elem.val());

            $elem.datepicker(options);

            /* Handle the field changing */
            ko.utils.registerEventHandler(element, "change", function () {
                prop($elem.datepicker("getDate"));
            });

            /* Handle disposal (if KO removes by the template binding) */
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                $elem.datepicker("destroy");
            });
        },
        'update': function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

            if (value - current !== 0) {
                $elem.datepicker("setDate", value);
            }
        }
    };
}
);

and this is the code for the html file that I have:

<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<input class="input-text" type="text" id="customer-dob" name="dob" value="" data-validate="{'required-entry':true}" data-bind="value: dob,datepicker: dob,datePickeroptions: {
                dateFormat: 'dd/M/yy',
                changeMonth: true,
                changeYear: true,
                maxDate: new Date(),
                datePickerPlaceholder: 'dd/M/yy' 
                }"/>

 <div class="product-item-details">

<div class="product-item-inner">
    <div class="product-item-name-block">
        <strong class="product-item-name" data-bind="text: $parent.name"></strong>
        <div data-bind="text: console.log($parent)"></div>

        <div class="details-price">
            <span class="label"><!-- ko i18n: 'Price' --><!-- /ko --></span>
            <span class="value" data-bind="text: getFormattedPrice($parent.price_incl_tax)"></span>
        </div>
    </div>

</div>

<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
    <span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
    <div data-role="content" class="content">
        <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
        <dl class="item-options">
            <!--ko foreach: JSON.parse($parent.options)-->
            <dt class="label" data-bind="text: label"></dt>
                <!-- ko if: ($data.full_view)-->
                <dd class="values" data-bind="html: full_view"></dd>
                <!-- /ko -->
                <!-- ko ifnot: ($data.full_view)-->
                <dd class="values" data-bind="html: value"></dd>
                <!-- /ko -->
            <!-- /ko -->
        </dl>
     </div>
   </div>
   <!-- /ko -->
  </div>
 <script>
 $( function() {
$( "#datepicker" ).datepicker();
} );
</script>

I referred the below link:

Link referred

However i am getting the below error:

Uncaught ReferenceError: Unable to process binding "value: function (){return dob }" Message: dob is not defined

Please help.

3 Answers 3

1

put the below code in your uiComponent's initialize function

ko.bindingHandlers.vbdatepicker = {
    init: function (element) {
        var options = {
            showButtonPanel: false,
            dateFormat: 'dd/mm/yy',
            showOn: 'both'
        };
        $(element).datepicker(options);
    }
};

and put the below code in your html template file.

<input type="text" readonly="readonly" data-bind="vbdatepicker: true, value: deliveryDate"
               name="delivery-date" id="vb-delivery-date" required/>

you will get the value in deliveryDate which is observable property of uiComponent

0

dob should be defined as observable.

initialize: function () { this.dob = ko.observable(''); }

0

if in input type binding not work , then you have to use "div" tag on input type & after that you can bind like that "datepicker:function".

<div class="datepicker" data-bind="click:datepicker">
<input class="input-text" type="text" id="customer-dob" name="dob" value="" data-validate="{'required-entry':true}" data-bind="value: dob,datepicker: dob,datePickeroptions: {
                dateFormat: 'dd/M/yy',
                changeMonth: true,
                changeYear: true,
                maxDate: new Date(),
                datePickerPlaceholder: 'dd/M/yy' 
                }"/>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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