Skip to main content
added 1144 characters in body
Source Link
Manish
  • 3.1k
  • 7
  • 32
  • 47

For TimePicker with date

  $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
     ['shippingAddress']['children']['shipping-address-fieldset']['children']['schedule'] = [
     'component' => 'Magento_Ui/js/form/element/abstract',
     'config'   => [
        'customScope' => 'shippingAddress.custom_attributes',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/date',
        'id' => 'schedule',
        'options' => [
            'timeInput' => true,
            'timeFormat' => "HH:mm:ss",
            'showsTime' => true
        ],
     ],
     'validation' => [
        'required-entry' => true
     ],
     'label' => __('Schedule Time'),
     'required' => true,
     'dataScope' => 'shippingAddress.custom_attributes.schedule',
     'provider' => 'checkoutProvider',
     'visible' => true,
     'sortOrder' => 98,
     'id' => 'schedule'
     ];

enter image description here

For TimePicker with date

  $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
     ['shippingAddress']['children']['shipping-address-fieldset']['children']['schedule'] = [
     'component' => 'Magento_Ui/js/form/element/abstract',
     'config'   => [
        'customScope' => 'shippingAddress.custom_attributes',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/date',
        'id' => 'schedule',
        'options' => [
            'timeInput' => true,
            'timeFormat' => "HH:mm:ss",
            'showsTime' => true
        ],
     ],
     'validation' => [
        'required-entry' => true
     ],
     'label' => __('Schedule Time'),
     'required' => true,
     'dataScope' => 'shippingAddress.custom_attributes.schedule',
     'provider' => 'checkoutProvider',
     'visible' => true,
     'sortOrder' => 98,
     'id' => 'schedule'
     ];

enter image description here

added 1044 characters in body
Source Link
Manish
  • 3.1k
  • 7
  • 32
  • 47

Here I got the solution:

<div class="control customer-dob">
    <input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="calendar_inputField" 
           name="dob"
           aria-required="true" />
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function ($) {
            $("#calendar_inputField").calendar({
                changeYear: true,
                changeMonth: true,
                yearRange: "1970:2050",
                buttonText: "Select Date",
            });
        });
    </script>
</div>

Preview:

Solution Preview

You can use in layout processor for shipping like this

  $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
     ['shippingAddress']['children']['shipping-address-fieldset']['children']['dob'] = [
     'component' => 'Magento_Ui/js/form/element/abstract',
     'config'   => [
        'customScope' => 'shippingAddress.custom_attributes',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/date',
        'id' => 'dob',
        'options' => [
            'changeYear'=> true,
            'changeMonth'=> true,
            'yearRange' => '1950:2050',
        ],
     ],
     'validation' => [
        'required-entry' => true
     ],
     'label' => __('Date of Birth'),
     'required' => true,
     'dataScope' => 'shippingAddress.custom_attributes.dob',
     'provider' => 'checkoutProvider',
     'visible' => true,
     'sortOrder' => 55
     ];

Here I got the solution:

<div class="control customer-dob">
    <input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="calendar_inputField" 
           name="dob"
           aria-required="true" />
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function ($) {
            $("#calendar_inputField").calendar({
                changeYear: true,
                changeMonth: true,
                yearRange: "1970:2050",
                buttonText: "Select Date",
            });
        });
    </script>
</div>

Preview:

Solution Preview

Here I got the solution:

<div class="control customer-dob">
    <input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="calendar_inputField" 
           name="dob"
           aria-required="true" />
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function ($) {
            $("#calendar_inputField").calendar({
                changeYear: true,
                changeMonth: true,
                yearRange: "1970:2050",
                buttonText: "Select Date",
            });
        });
    </script>
</div>

Preview:

Solution Preview

You can use in layout processor for shipping like this

  $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
     ['shippingAddress']['children']['shipping-address-fieldset']['children']['dob'] = [
     'component' => 'Magento_Ui/js/form/element/abstract',
     'config'   => [
        'customScope' => 'shippingAddress.custom_attributes',
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/date',
        'id' => 'dob',
        'options' => [
            'changeYear'=> true,
            'changeMonth'=> true,
            'yearRange' => '1950:2050',
        ],
     ],
     'validation' => [
        'required-entry' => true
     ],
     'label' => __('Date of Birth'),
     'required' => true,
     'dataScope' => 'shippingAddress.custom_attributes.dob',
     'provider' => 'checkoutProvider',
     'visible' => true,
     'sortOrder' => 55
     ];
improve formatting
Source Link
Siarhey Uchukhlebau
  • 16.2k
  • 11
  • 55
  • 88

Here I got the solution:

<div class="control customer-dob">
    <input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="calendar_inputField" 
           name="dob"
           aria-required="true">required="true" />
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function ($) {
            $("#calendar_inputField").calendar({
                changeYear: true,
                changeMonth: true,
                yearRange: "1970:2050",
                buttonText: "Select Date",
            });
        });
    </script>
</div>

SolutionPreview:

enter image description hereSolution Preview

Here I got the solution:

<div class="control customer-dob">
  <input type="text" class="input-text required-entry hasDatepicker" id="calendar_inputField" name="dob" aria-required="true">
  <script>
  require([
       "jquery",
       "mage/calendar"
  ], function($){
      $("#calendar_inputField").calendar({
  changeYear:true,
  changeMonth:true,
             yearRange: "1970:2050",
           buttonText:"Select Date",
      });
    });
  </script>
</div>

Solution:

enter image description here

Here I got the solution:

<div class="control customer-dob">
    <input type="text" 
           class="input-text required-entry hasDatepicker" 
           id="calendar_inputField" 
           name="dob"
           aria-required="true" />
    <script>
        require([
            "jquery",
            "mage/calendar"
        ], function ($) {
            $("#calendar_inputField").calendar({
                changeYear: true,
                changeMonth: true,
                yearRange: "1970:2050",
                buttonText: "Select Date",
            });
        });
    </script>
</div>

Preview:

Solution Preview

Source Link
Manish
  • 3.1k
  • 7
  • 32
  • 47
Loading