Magento – How to add datepicker field in Checkout

checkoutcheckout-pagecustom-fielddatepickermagento2.2.6

I want to add a date picker field into the checkout page but I have no idea where to start.

I have tried this Add date picker in checkout page but it's not working for me.

We are having the below folder structure:

app\code\siva\mymodule\view\frontend\web\template\shipping.html

In shipping.html, we have the form which needs to be shown on the frontend.

Now, can I add both the HTML input field and JS in the same file, shipping.html?

If anyone got the delivery date field works in Checkout, please help me with this.

Updated Code in shipping-mixin.js:

   define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/action/create-billing-address',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/checkout-data',
    'mage/translate'
], function(
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    createBillingAddress,
    selectBillingAddress,
    setShippingInformationAction,
    stepNavigator,
    checkoutData,
    $t
) {
    'use strict';
    $('#conform-account-scola-btn').prop('disabled', false);
    $('#onepage-guest-register-button').prop('disabled', false);
    $('#loa').hide(); 
    return function (target) {
        return target.extend({
            defaults: {
                template: 'DCKAP_School/shipping'
            },
            setShippingInformation: function () {
                var flag=false;
                var count = 0;
                var scrollTo = '';
                if($('input[name=school-or-private-person]').val() == 'school'){

                    $(".school-required-entry").each(function() {
                        if (this.value == 0 || this.value == '') {
                            count++;
                            //$(this).next('.school_err').html("This is a required field.");
                $(this).next('.school_err').html("Vänligen fyll i detta obligatoriska fält.");
                            $(this)[0].style.borderColor = "#ed8380";
                            $(this).next('.school_err').css("display", "block");
                            if(count==1){
                                scrollTo = "#"+$(this).attr('id');
                            }
                            flag=true;
                        }else{
                            $(this).next('.school_err').html('');
                $(this)[0].style.borderColor = "";
                            if(this.value != '')
                            {
                              if($("#school-display").css('display') == 'block' ){
                               $("#schoolsearch").next('.school_err').html("Vänligen klicka på din skola från listan nedan");
                               $("#schoolsearch").next('.school_err').css("display","block");
                               $("#schoolsearch").css("borderColor", "#ed8380");
                   $("html, body").animate({ scrollTop: 180 }, "slow");
                              }
                            } 
                        }
                    });

                    if (flag) {
                        if($("#school-display").css('display') == 'block' ){
                          $("html, body").animate({ scrollTop: 180 }, "slow");
                        }
                        else
                        {
                          $('html, body').animate({
                            scrollTop: $(scrollTo).offset().top
                          });  
                        }                        
                        return false;
                    }
                var firstname = $('#dc_shipping_firstname').val();
                var lastname = $('#dc_shipping_lastname').val();
                $('#shipping-new-address-form [name="firstname"]').val(firstname).keyup();
                $('#shipping-new-address-form [name="lastname"]').val(lastname).keyup();
                $('#billing-address-form [name="firstname"]').val(firstname).keyup();
                $('#billing-address-form [name="lastname"]').val(lastname).keyup();

                }
                else if ($('input[name=school-or-private-person]').val() == 'private')
                {
                   if ($("#customer-email").val() == 0 || $("#customer-email").val() == '') {
                    $("#customer-email").css("borderColor","#ed8380");
                    $(".input-text.mage-error").next('.school_err').css("display","none");
                    $("#customer-email-error").html("Vänligen fyll i detta obligatoriska fält."); 
                   }
                } 

                if (this.validateShippingInformation() && this.validateBillingInformation()) {
                    setShippingInformationAction().done(
                        function () {
                            $("#majema-school").hide();
                            $("#place-order-trigger-wrapper").show();
                            $("#custom-info").appendTo("#co-payment-form");
                            $('#custom-shipping-method-buttons-container').hide();
                            $('#custom-subtotal').hide();
                            $('.opc-block-summary .table-totals').show();
                            stepNavigator.next();
                        }
                    );
                }
            },
            validateBillingInformation: function() {

                if($('[name="billing-address-same-as-shipping"]').is(":checked")) {
                    if (this.isFormInline) {
                        var shippingAddress = quote.shippingAddress();
                        var addressData = addressConverter.formAddressDataToQuoteAddress(
                            this.source.get('shippingAddress')
                        );
                        //Copy form data to quote shipping address object
                        for (var field in addressData) {

                            if (addressData.hasOwnProperty(field) &&
                                shippingAddress.hasOwnProperty(field) &&
                                typeof addressData[field] != 'function' &&
                                _.isEqual(shippingAddress[field], addressData[field])
                            ) {
                                shippingAddress[field] = addressData[field];
                            } else if (typeof addressData[field] != 'function' &&
                                !_.isEqual(shippingAddress[field], addressData[field])) {
                                shippingAddress = addressData;
                                break;
                            }
                        }

                        if (customer.isLoggedIn()) {
                            shippingAddress.save_in_address_book = 1;
                        }
                        var newBillingAddress = createBillingAddress(shippingAddress);
                        selectBillingAddress(newBillingAddress);
                    } else {
                        selectBillingAddress(quote.shippingAddress());
                    }

                    return true;
                }

                var selectedAddress = $('[name="billing_address_id"]').val();
                if(selectedAddress) {
                    var res = addressList.some(function (addressFromList) {
                        if (selectedAddress == addressFromList.customerAddressId) {
                            selectBillingAddress(addressFromList);
                            return true;
                        }
                        return false;
                    });

                    return res;
                }

                this.source.set('params.invalid', false);
                this.source.trigger('billingAddress.data.validate');

                if (this.source.get('params.invalid')) {
                    return false;
                }

                var addressData = this.source.get('billingAddress'),
                    newBillingAddress;

                if ($('#billing-save-in-address-book').is(":checked")) {
                    addressData.save_in_address_book = 1;
                }

                newBillingAddress = createBillingAddress(addressData);
                selectBillingAddress(newBillingAddress);

                return true;
            }

        });


initialize: function () {
                    this._super();
                    ko.bindingHandlers.datetimepicker = {
                        init: function (element, valueAccessor, allBindingsAccessor) {
                            var $el = $(element);
                            //initialize datetimepicker
                            var options = {
                                minDate: 0,
                                dateFormat: 'yy-mm-dd'
                            };

                            $el.datetimepicker(options);

                            var writable = valueAccessor();
                            if (!ko.isObservable(writable)) {
                                var propWriters = allBindingsAccessor()._ko_property_writers;
                                if (propWriters && propWriters.datetimepicker) {
                                    writable = propWriters.datetimepicker;
                                } else {
                                    return;
                                }
                            }
                            writable($(element).datetimepicker("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;
                }    
    }
});

Error in the console:

Best Answer

app/code/SR/MagentoCommunity/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'SR_MagentoCommunity/js/mixin/shipping-mixin': true
            }
        }
    }
};

app/code/SR/MagentoCommunity/view/frontend/web/js/mixin/shipping-mixin.js

define(
    [
        'jquery',
        'ko',
        'mage/translate'
    ], function (
        $,
        ko,
        $t
    ) {
        'use strict';

        return function (target) {
            return target.extend({
                initialize: function () {
                    this._super();
                    ko.bindingHandlers.datetimepicker = {
                        init: function (element, valueAccessor, allBindingsAccessor) {
                            var $el = $(element);
                            //initialize datetimepicker
                            var options = {
                                minDate: 0,
                                dateFormat: 'yy-mm-dd'
                            };

                            $el.datetimepicker(options);

                            var writable = valueAccessor();
                            if (!ko.isObservable(writable)) {
                                var propWriters = allBindingsAccessor()._ko_property_writers;
                                if (propWriters && propWriters.datetimepicker) {
                                    writable = propWriters.datetimepicker;
                                } else {
                                    return;
                                }
                            }
                            writable($(element).datetimepicker("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;
                }
            });
        }
    }
);

Now in shipping.html add following code:

<label class="label">Delivery Date</label>
<div class="control">
    <input class="input-text" type="text" data-bind="datetimepicker: true"  name="delivery_date" id="delivery_date" readonly="true"/>
</div>

Clear static content if your Magento mode is not developer

Related Solutions

Magento – Add datepicker on frontend

When I try your code I get a JS error:

Uncaught TypeError: Cannot read property 'length' of undefinedcalendar.js:1660 Date.parseDatecalendar-setup.js:21 triggerEl.(anonymous function)

If I add all of the initialization that goes along with the calendar above the footer calendar <script> then it works.

<script type="text/javascript">
//<![CDATA[
enUS = {"m":{"wide":["January","February","March","April","May","June","July","August","September","October","November","December"],"abbr":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}}; // en_US locale reference
Calendar._DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; // full day names
Calendar._SDN = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; // short day names
Calendar._FD = 0; // First day of the week. "0" means display Sunday first, "1" means display Monday first, etc.
Calendar._MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; // full month names
Calendar._SMN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // short month names
Calendar._am = "AM"; // am/pm
Calendar._pm = "PM";

// tooltips
Calendar._TT = {};
Calendar._TT["INFO"] = "About the calendar";

Calendar._TT["ABOUT"] =
"DHTML Date/Time Selector\n" +
"(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL. See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";

Calendar._TT["PREV_YEAR"] = "Prev. year (hold for menu)";
Calendar._TT["PREV_MONTH"] = "Prev. month (hold for menu)";
Calendar._TT["GO_TODAY"] = "Go Today";
Calendar._TT["NEXT_MONTH"] = "Next month (hold for menu)";
Calendar._TT["NEXT_YEAR"] = "Next year (hold for menu)";
Calendar._TT["SEL_DATE"] = "Select date";
Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";
Calendar._TT["PART_TODAY"] = ' (' + "Today" + ')';

// the following is to inform that "%s" is to be the first day of week
Calendar._TT["DAY_FIRST"] = "Display %s first";

// This may be locale-dependent. It specifies the week-end days, as an array
// of comma-separated numbers. The numbers are from 0 to 6: 0 means Sunday, 1
// means Monday, etc.
Calendar._TT["WEEKEND"] = "0,6";

Calendar._TT["CLOSE"] = "Close";
Calendar._TT["TODAY"] = "Today";
Calendar._TT["TIME_PART"] = "(Shift-)Click or drag to change value";

// date formats
Calendar._TT["DEF_DATE_FORMAT"] = "%b %e, %Y";
Calendar._TT["TT_DATE_FORMAT"] = "%B %e, %Y";

Calendar._TT["WK"] = "Week";
Calendar._TT["TIME"] = "Time:";

CalendarDateObject._LOCAL_TIMZEONE_OFFSET_SECONDS = -18000;
CalendarDateObject._SERVER_TIMZEONE_SECONDS = 1423128369;

//]]>
</script>

<!-- YOUR CALENDAR CODE BELOW LIKE THIS -->

<script type="text/javascript">
//<![CDATA[
Calendar.setup({
    inputField : '_dob',
    ifFormat : '%m/%e/%y',
    button : '_dob_trig',
    align : 'Bl',
    singleClick : true
});
//]]>
</script>

Magento2 UI Components – Clear Billing Form Validation Errors

You've asked a bit of a mouthful there -- probably too much for a single Stack Exchange question, so I'm going to concentrate on teaching you how to reset the initial state of the form so things no longer appear invalid if there's a blank value. If you're interested in the whys, you'll need to get up to speed on the fundamentals of UI Components and x-magento-init scripts. My Magento 2 UI Components and uiElement Internals series are a good place to start. The following assumes you have some familiarity with these systems -- if there's something confusing below then the above articles (as well as the other Magento 2 articles) will probably have the information you're looking for.

In the Checkout Application, each form field is represented by a view model, and one-or-many view model templates. You can see this in Commerce Bug's KO Scopes tab.

The firstname's view model is an object derived from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module. You can find that model's source code here

vendor/magento//module-ui/view/base/web/js/form/element/abstract.js

The reset method is the one we're interested in. This will reset a field's validation state. You'll need to figure out the full uiRegistry string identifier for the specific model (again, Commerce Bug is useful here), use that string to fetch the instantiated view model, and then call the reset function. For the checkmo form, the following program (easily adapted into a define module if you're going to use it in your application) will do that for the firstname field.

requirejs(['uiRegistry'], function(uiRegistry){
    uiRegistry.get('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields.firstname').reset();
});

Of course, you'll likely want to fetch each view model that's part of a particular form -- the following is a start on that.

uiRegistry.get(function(viewModel){
    var parentName = viewModel['parentName'] ? viewModel['parentName'] : '';
    if(parentName.indexOf('checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields') === -1){
        return;
    };       
    console.log(viewModel);
});

This uses the uiRegistry's callback feature to search for all view models with a parent of checkout.steps.billing-step.payment.payments-list.checkmo-form.form-fields. Some of these may not be form elements, but we'll leave that problem as an exercise for the questioner.

Hope that helps!

Best Answer

Related Solutions

Magento – Add datepicker on frontend

Magento2 UI Components – Clear Billing Form Validation Errors

Related Topic