JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<th>From:
    <input type="text" class=" datepicker from span2" value="" id="startRemitDate">
</th>
<br>
<th>To:
    <input type="text" class="datepicker to span2" value="" id="endRemitDate">
</th>
<br>
<br>
<br>
<th>From1:
    <input type="text" class=" datepicker from span2" value="" id="startExpectDate">
</th>
<br>
<th>To1:
    <input type="text" class="datepicker to span2" value="" id="endExpectDate">
</th>

JavaScript

var twq = {};
twq.dateRangeOneMonth = {
    setting: function (rangeOfMonth,jsonObjList) {
        var arr = [];
        $.each(jsonObjList, function (key, value) {
            $.each(value, function (key, value) {
                twq.dateRangeOneMonth.datePickerComponent(key, value,rangeOfMonth);
                twq.dateRangeOneMonth.keyUp(key, value, rangeOfMonth);

            });
        })
    },
    keyUp: function (key, value,rangeOfMonth) {
        $('#' + key + ',#' + value).keyup(function () {
            if ($('#' + key).val() === "" && $("#" + value).val() === "") {
                $('#' + key).datepicker('remove');
                $('#' + value).datepicker('remove');
                $(this).blur();
                twq.dateRangeOneMonth.datePickerComponent(key, value,rangeOfMonth);

            }
        });
    },
    datePickerComponent :  function (key, value,rangeOfMonth) {
            $('#' + key).datepicker({
        autoclose: true,
                format :  'yyyy/mm/dd'
    }).on('changeDate', function (e) {
        var date = new Date(e.date);
        date.setMonth(date.getMonth() + rangeOfMonth);
        var temp = $('#' + value).datepicker({
            autoclose: true
        }).datepicker('setStartDate', e.date).datepicker('setEndDate', date);
        (temp.val() == "") && (temp.focus());
    });
    $('#' + value).datepicker({
        autoclose: true,
        format :  'yyyy/mm/dd'
    }).on('changeDate', function (e) {
        var date = new Date(e.date);
        date.setMonth(date.getMonth() - rangeOfMonth);
        var temp = $('#' + key).datepicker({
            autoclose: true
        }).datepicker('setEndDate', e.date).datepicker('setStartDate', date);
        (temp.val() == "") && (temp.focus());
    });
    }
};

twq.dateRangeOneMonth.setting( 1, [{"startRemitDate": "endRemitDate"}, {"startExpectDate": "endExpectDate"}]);