在动态日期选择器上设置startDate [英] Set startDate on dynamic datepicker

问题描述

我已经使用jquery动态创建了html表，其中包含3行带有输入文本框.表的字段是

I have dynamically created html table using jquery which contains 3rows with input textboxes.The fields of the table are

SlNo        Fee          ST       TotalAmt       DueDate

DueDate的第一行中的startDate应该是当前日期.

On the first row startDate of DueDate should be the current date.

DueDate的第二行startDate应该是先前选择的日期(第一行的日期).

On the second row startDate of DueDate should be previously(date of first row) selected date.

在DueDate的第三行中，startDate应该是先前选择的日期(第二行的日期)

On the third row startDate of DueDate should be previously(date of second row) selected date

用于动态创建表格的jQuery

 var $tbody = $("#tblPaymentDetails tbody");
    $($tbody).html('');

    for (var i = 0; i < 3; i++) {

        var slno = parseInt(i + 1);

        var $row = $('<tr/>');
        $row.append(' <td class="slno">' + slno + '</td>');

        $row.append(' <td><input name="StudentReceipt[' + i + '].Fee" type="text" class="form-control"  /></td>');
        $row.append(' <td><input name="StudentReceipt[' + i + '].ST" type="text" class="form-control "  /></td>');
        $row.append(' <td><input name="StudentReceipt[' + i + '].Total" type="text" class="form-control "  /> </td>');
        $row.append(' <td><input id="txtDueDate'+i+'" name="StudentReceipt[' + i + '].DueDate" type="text" class="form-control duedate"  /></td>');

        $tbody.append($row);

    }

jQuery动态日期选择器

$(document).on('focus', ".dueDate", function () {
    var currentDatepickerId = $(this).attr("id");
    var currMinDate="";
    //For first datepicker
    if (currentDatepickerId == "txtDueDate0") {            
        currMinDate=new Date()
    }
    else {
        //gets the last selected date from the hiddenfield
        var selectedDate = $("#selectedDate").val().split("/");
        currMinDate = new Date(selectedDate[2], selectedDate[0] - 1, selectedDate[1]);
    }     

    $(this).datepicker({
        autoclose: true,
        startDate: currMinDate           
    }).on("change", function (evt) {
        var currValue = $(this).val();
        //stores the currently selected value to hiddenfield
        $("#selectedDate").val(currValue);
    });

});

这是我尝试过的方法，第一次尝试就获得了预期的结果，但是在重置first row的textbox value时，会将second row的start date设置为newDate

This is what I have tried.I am getting the desired result on the first attempt.But on resetting the textbox value of the first row makes the start date of the second row to the newDate

推荐答案

您需要处理日期选择器的changeDate事件，以更新其他日期选择器中的startDate值.

You need to handle the changeDate event of the datepicker to update the startDate values in the other datepickers.

请注意，我假设您使用的是此日期选择器

Note that I am assuming your using this datepicker

首先在脚本中初始化和设置默认的startDate值，该脚本动态创建表并包括一个变量来存储所有日期选择器，以使选择更加容易，然后处理changeDate事件以在此之后更新所有日期选择器.

Start by initializing and setting the default startDate value in your script that dynamically creates the table and include a variable to store all datepickers to make selection easier, then handle the changeDate event to update all datepickers after this one.

var datepickers; // declare this as global variable

// your function to create the table
{
    for (var i = 0; i < 3; i++) {
        ....
        $tbody.append($row);
    }
    // store the datepicker elements
    datepickers = $tbody.find('.duedate');
    console.log(datepickers.length); // should return '3'
    // attach the datepicker plugin to each element
    $('.duedate').datepicker({
        autoclose: true,
        startDate: '+0d' // set default to today's date
    }).on('changeDate', function(e) {
        console.log(e.date); // should return the selected date
        var index = datepickers.index($(this)); // should return '1' if you selected the datepicker in the second row
        // loop through all the datepickers after this one
        for(var i = index + 1; i < datepickers.length; i++) {
            // set the startDate based on the date of this one
            datepickers.eq(i).datepicker('setStartDate', e.date);
        }
    });
}

最后，删除您的$(document).on('focus', ".dueDate", function () {函数和隐藏的输入

And finally, remove your $(document).on('focus', ".dueDate", function () { function and the hidden input

这篇关于在动态日期选择器上设置startDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！