Magento – Magento 2 how to restrict previous date in datepicker , for frontend detail page custom options

datedatepickermagento2product-detail-pageproduct-view-page

In Magento 2 how to restrict previous dates in datepicker ,in detail page customizable options,

Please help me out on this .

Best Answer

If you are using Magento calendar library or jQuery date picker library then use below method

require([
         "jquery",
         "mage/calendar"
         ], function ($) {

    $('#example').datepicker({
                        dateFormat: "yy-mm-dd",
                        timeFormat: "H:m:s",
                        changeMonth: true,
                        changeYear: true,
                        numberOfMonths: 1,
                        showsTime: true,
                        minDate: new Date()
                    });
});

In this, the minDate is the Date before which you want to restrict.

Related Solutions

Magento – How to add datepicker in magento 2 frontend form

you can use the magento 2 datepicker. It use the jquery_ui datepicker.

Try this in your phtml:

<script type="text/javascript">
require([
    "jquery",
    "mage/calendar"
], function($){
  $('#datepicker').datepicker({
       prevText: '&#x3c;zurück', prevStatus: '',
        prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
        nextText: 'Vor&#x3e;', nextStatus: '',
        nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
        monthNames: ['Januar','Februar','März','April','Mai','Juni',
        'Juli','August','September','Oktober','November','Dezember'],
        monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
        'Jul','Aug','Sep','Okt','Nov','Dez'],
        dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
      showMonthAfterYear: false,
      dateFormat:'d.m.yy'
    } 
  );
});
</script>

Example with form:

<div class="field col-sm-6 ">
    <div class="response-field-date">
        <div class="subtemplate-wrapper">
            <label for="" style="" class="">Terminwunsch</label>
            <div class="row">
                <div class="input-box col-sm-12">
                    <input name="terminwunsch" id="datepicker" title="Terminwunsch" value="" type="text">
                    <script type="text/javascript">
                    require([
                        "jquery",
                        "mage/calendar"
                        ], function($){
                          $('#datepicker').datepicker({
                               prevText: '&#x3c;zurück', prevStatus: '',
                                prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',
                                nextText: 'Vor&#x3e;', nextStatus: '',
                                nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '',
                                monthNames: ['Januar','Februar','März','April','Mai','Juni',
                                'Juli','August','September','Oktober','November','Dezember'],
                                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                                'Jul','Aug','Sep','Okt','Nov','Dez'],
                                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                              showMonthAfterYear: false,
                              dateFormat:'d.m.yy'
                            } 
                          );
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

Magento 2 – Add Custom Price Type in Customizable Options

Create a plugin for that. So you need to create new module Or add following code into your existing module.

SR/StackExchange/etc/adminhtml/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\Catalog\Model\Config\Source\Product\Options\Price">
        <plugin name="sr_stackexchange_add_price_type" type="SR\StackExchange\Plugin\Catalog\Model\Config\Source\Product\Options\Price" sortOrder="1"/>
    </type>
</config>

SR/StackExchange/Plugin/Catalog/Model/Config/Source/Product/Options/Price.php

namespace SR\StackExchange\Plugin\Catalog\Model\Config\Source\Product\Options;

class Price
{
    /**
     * {@inheritdoc}
     *
     * @codeCoverageIgnore
     */
    public function afterToOptionArray(
        \Magento\Catalog\Model\Config\Source\Product\Options\Price $subject,
        array  $priceTypeOption
    ){
        $priceTypeOption[] = ['value' => 'new_type', 'label' => __('New Type')];
        return $priceTypeOption;
    }
}

Clear magento cache.

Best Answer

Related Solutions

Magento – How to add datepicker in magento 2 frontend form

Magento 2 – Add Custom Price Type in Customizable Options

Related Topic