locked
Show End Date based on User Selected Start Date RRS feed

  • Question

  • User488603867 posted

    Hi, 

    I am using XDSOFT Datetimepicker Plugin for a custom order form in Woocommerce. Where the user has to choose a delivery period in terms of 1week, 1month, and 3months.

    I displayed two date fields where the user has to select start day and based on the tenure (1week, 1month. 3months), the end date should be automatically displayed.

    Can someone help me to write code?

    Initially, I tried to display the start date in the end date field and below is the code,

       $(document).ready(function () {
        
            jQuery("#date-5d7a56e96d69c").datetimepicker({
                dateFormat: "dd-M-yy",
                minDate: 0,
                onSelect: function (date) {
                    var date2 = $('#date-5d7a56e96d69c').datetimepicker('getDate');
                    date2.setDate(date2.getDate() + 1);
                    $('#date-1568299025701').datetimepicker('setDate', date2);
                    //sets minDate to dt1 date + 1
                    $('#date-1568299025701').datetimepicker('option', 'minDate', date2);
                }
            });
            jQuery('date-1568299025701').datetimepicker({
                dateFormat: "dd-M-yy",
                onClose: function () {
                    var dt1 = $('#date-5d7a56e96d69c').datetimepicker('getDate');
                    console.log(dt1);
                    var dt2 = $('#date-1568299025701').datetimepicker('getDate');
                    if (dt2 <= dt1) {
                        var minDate = $('#date-1568299025701').datetimepicker('option', 'minDate');
                        $('#date-1568299025701').datetimepicker('setDate', minDate);
                    }
                }
            });
        });

    But, I could able to get the start date in the end date field.

    Friday, September 20, 2019 5:50 PM

All replies

  • User-719153870 posted

    Hi myilraj,

    I am using XDSOFT Datetimepicker Plugin

    According to your requirement, below solution is all based on the XDSOFT Datetimepicker.

    the end date should be automatically displayed.

    If you want to automatically set your second input's value, maybe you should do this in your first datetimepicker's onclose() method.

    user has to choose a delivery period in terms of 1week, 1month, and 3months.

    You can refer to below code, this is a demo when the period is 1 week :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Scripts/datetimepicker-master/jquery.datetimepicker.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.3.1.js"></script>
        <script src="Scripts/datetimepicker-master/build/jquery.datetimepicker.full.min.js"></script>
        <script>
            $(document).ready(function () {
                jQuery("#date-5d7a56e96d69c").datetimepicker({
                    dateFormat: "dd-M-yy",
                    minDate: 0,
                    onSelect: function (date) {
                        var date2 = $('#date-5d7a56e96d69c').datetimepicker('getDate');
                        date2.setDate(date2.getDate() + 1);
                        $('#date-1568299025701').datetimepicker('setDate', date2);
                        //sets minDate to dt1 date + 1
                        $('#date-1568299025701').datetimepicker('option', 'minDate', date2);
                    },
                    onClose: function () {
                        var days = 7;
                        var dt1 = $('#date-5d7a56e96d69c').val();
                        var date = new Date(addDaysToDate(dt1, days));
                        var fdate = date.getFullYear() + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
                        $('#date-1568299025701').val(fdate);
                    }
                });
                jQuery('#date-1568299025701').datetimepicker({
                    dateFormat: "dd-M-yy",
                    onShow: function (ct) {
                        var days = 7;
                        var dt1 = $('#date-5d7a56e96d69c').val();
                        console.log(dt1);
                        console.log(addDaysToDate(dt1, days));
                        $('#date-1568299025701').datetimepicker({ minDate: dt1 ? addDaysToDate(dt1, days) : false });
                    }
                });
                function addDaysToDate(date, days) {
                    var d1 = new Date(date);
                    d1.setDate(d1.getDate() + days);
                    return d1;
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="date-5d7a56e96d69c" type="text" />
                <input id="date-1568299025701" type="text" />
            </div>
        </form>
    </body>
    </html>

    The result of this demo:

    If i misundertood anything, please feel free to let me know.

    Best Regard,

    Yang Shen

    Monday, September 23, 2019 4:00 AM