Hello I'm trying to automatically adjust the value of a 2nd date picker based on the 1st date picker

[Santiago III]

Hello Team,

I need to automatically set a value of a second date picker based on the value of the first date picker. In this case how can I add 3 months to the value of date1 and show it on date2. 

 

I'm still starting out as a developer any help would be appreciated. Thanks in advance!

   JQuery:

    function toggleAssigntype() {
        var assignTypeVal = $("#TypeOfAssignmentId").data("kendoComboBox").text();
        var date1 = $("#MobilizationDate").val(); // value format "mm/dd/yyyy"
        var date2 = $("#DemobilizationDate").val();
var addmonths = "03/00/0000";
var addyear = "00/00/0001";


        if (assignTypeVal == "RFT") {
            //should add 3 months to demobilization date
            $("#OtFactor").data("kendoNumericTextBox").enable(false);
            $("#DemobilizationDate").data("kendoDatePicker").value(date1+addmonths); 

          }

       else {
            $("#OtFactor").data("kendoNumericTextBox").enable(false);
         }
    };

         

[Lyuboslav]

Hi Santiago,

First, you need to initialize two DatePicker components. After that, you should handle the "change" event in the first widget:

 $("#datepickerOne").kendoDatePicker({
      	change:(e)=>{
        }
})

Next, in the event, you must get the reference to the second DatePicker:

var secondDatePicker = $("#datepickerTwo").data("kendoDatePicker");

Finally, to add 3 months to the value of the first DatePicker you could use the "setMonth" method like the code snippet below:

var currentDate = new Date(e.sender.value());
currentDate.setMonth(currentDate.getMonth() + 3)
secondDatePicker.value(currentDate);

 

Here I created an example that demonstrates the described steps above.

I hope this will help you, let me know if you have additional questions.

Regards,
Lyuboslav
Progress Telerik

[Santiago III]

Hello Lyuboslav,

Thank you for taking time helping me out. However the code doesn't work as I am intending to currently since the change should be dependent on the combobox combobox1 where if the value is RFT then it would span 3mnths between the startdate and end date while disabling the field OT.

   <script>
        $(document).ready(function () {
            $("#combobox1").kendoComboBox();
            $("#startDate").kendoDatePicker();
            $("#endDate").kendoDatePicker();


            $("#combobox1").change(function () {
                debugger;
                var duration = $(this).val();
                var startDate = $("#startDate").data("kendoDatePicker").val();

                if (duration == "RFT") {
                    var endDate = new Date(startDate);
                    endDate.setMonth(endDate.getMonth() + 3);
                    $("#OT").data("kendoNumericTextBox").enable(false);
                    $("#endDate").data("kendoDatePicker").setDate(endDate);
                }
                else {
                    var endDate = new Date(startDate);
                    endDate.setFullYear(endDate.getFullYear() + 1);
                    $("#endDate").data("kendoDatePicker").setDate(endDate);
                }
            });
        });
    </script>

[Santiago III]

apologies this is my most current code

 

    const addThreeMonths = (date) => {
        const result = new Date(date);
        result.setMonth(result.getMonth() + 3);
        return result;
    }

    const addOneYear = (date) => {
        const result = new Date(date);
        result.setFullYear(result.getFullYear() + 1);
        return result;
    }

    assignType.on("change", function () {
        debugger;
        toggleAssignType();
    });

    function toggleAssignType() {
        var assignTypeVal = $("#TypeOfAssignmentId").data("kendoComboBox").text();
        var startDate = $("#MobilizationDate").data("kendoDatePicker");
        var endDate = $("#DemobilizationDate").data("kendoDatePicker");
        //const assignTypeVal = $("#TypeOfAssignmentId").data("kendoComboBox").val(); replaced const with var
        if (assignTypeVal == "RFT") {
            $("#OtFactor").data("kendoNumericTextBox").enable(false);
            var newDate = addThreeMonths(startDate.value);
            endDate.value = newDate;
        } else if (assignTypeVal == "RFD") {
            $("#OtFactor").data("kendoNumericTextBox").enable(true);
            var newDate = addOneYear(startDate.value);
            endDate.value = newDate;
        } else {
            $("#OtFactor").data("kendoNumericTextBox").enable(true);
        }
    }

[Lyuboslav]

Hello Santiago,

Thanks for providing the code snippets.

First, you need to handle the "change" event in the first DatePicker widget. After that get the reference to the ComboBox to get its value:

var combo = $("#combobox").data("kendoComboBox");

When we do that, already have the value for the if statement. In case the value is "RFT" you need to get the reference to the second DatePicker and use the "setOptions" method to set the max with the value: date from first DatePicker + 3 months

          if(combo.value() == "RFT"){
          	var secondDatePicker = $("#datepickerTwo").data("kendoDatePicker");
            var currentDate = new Date(e.sender.value());
            currentDate.setMonth(currentDate.getMonth()+3);
            secondDatePicker.setOptions({
            	min:e.sender.value(),
              max:currentDate
            });
            $("#readyToDisable").prop("disabled",true);
          }

Finally, as you can see in the code snippet above uses the jQuery "prop" method to disable the input. Thus, when 'RFT' is selected in the ComboBox and a date is selected in the first DatePicker, the '#readyToDisable' input will be disabled.

The described above is demonstrated in the sample dojo example.

I hope this will help you.

Regards,
Lyuboslav
Progress Telerik

[Santiago III]

Hello and happy holidays thank you for continued support with regards to this inquiry.

 

However the example doesn't seem to work when I tried running it on the kendo dojo

[Neli]

Hi Santiago,

I reviewed the example provided by my colleague Lyuboslav. On my side any date can be selected in the DatePickers initially. However, once'RFT' is selected in the ComboBox and a date is selected in the DatePickerOne, then the range in the DatePickerTwo is set to three months after the selected date in DatePickerOne. Also the '#readyToDisable' input is disabled. Could you please let me know if the behavior is the same on your side and what is not working on your end?

Looking forward to your reply.

Regards,

Neli