Magento – Magento 2 Datepicker in checkout using knockout js

datepickerknockoutjsmagento2

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.

Best Answer

dob should be defined as observable.

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