0

I'm trying to display the calendar control to select the date, for that i have wrote some thing. But it's displaying textbox calendar control is not popping could you please suggest me how to insert the calendar inside the textbox.

My code is:

Learning/AdditionalShippingBlock/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">Learning\AdditionalShippingBlock\Model\CustomBlockConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Learning/AdditionalShippingBlock/Model/CustomBlockConfigProvider.php

<?php
namespace Learning\AdditionalShippingBlock\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Store\Model\ScopeInterface;

class CustomBlockConfigProvider implements ConfigProviderInterface
{
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $scopeConfiguration;


    /**
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
     * @codeCoverageIgnore
     */
    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfiguration
    ) {
        $this->scopeConfiguration = $scopeConfiguration;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $showHide = [];
        $enabled = $this->scopeConfiguration->getValue('learning_block_config/general/enabled', ScopeInterface::SCOPE_STORE);
        $showHide['show_hide_custom_block'] = ($enabled)?true:false;
        return $showHide;
    }
}

**Learning/AdditionalShippingBlock/view/frontend/layout/checkout_index_index.xml **

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Learning_AdditionalShippingBlock/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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

define([
    'uiComponent'
], function (Component) {
    'use strict';
    var show_hide_custom_blockConfig = window.checkoutConfig.show_hide_custom_block;
    return Component.extend({
        defaults: {
            template: 'Learning_AdditionalShippingBlock/checkout/shipping/additional-block'
        },
        canVisibleBlock: show_hide_custom_blockConfig
    });
});

Learning/AdditionalShippingBlock/view/frontend/templates/checkout/shipping/additional-block.phtml

    <input type="text" class="input-text required-entry" id="calendar_inputField" name="calendar_inputField" aria-required="true" >

<script>
     require([
          "jquery",
          "mage/calendar"
     ], function($){
         $("#calendar_inputField").calendar({
              buttonText:"<?php echo __('Select Date') ?>",
         });
       });
</script>

Could you please suggest me how to do it.

enter image description here

1 Answer 1

4

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

});

3
  • Thanks, it's working fine. If it possible tell me how to get the date and save the value to DB?
    – Bojjaiah
    Commented Dec 18, 2015 at 9:57
  • please suggest me how to get value and save to db?
    – Bojjaiah
    Commented Apr 15, 2016 at 10:11
  • suggest me on how to get the value and save to db
    – Bojjaiah
    Commented Apr 15, 2016 at 10:18

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.