使用日期选择器获取输入的字符串值

Question

I'm trying to make a page where I can pass values chosen from a "datepicker" which comes from an "input" box, and I can't figure out how to get the values be something other than [object].

Here is my View file:

<link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" type="text/css" />
<link href="~/Content/reportsPayrollStyle.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "Utilities EFT";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.Partial("_UtilitiesNavPartial")
<h2>Electronic Funds Transfer Report</h2>

<div class="container-fluid left">
    <div class="container-fluid left">
        <table id="eftTable">
            <tbody>
                <tr style="margin-bottom:40px; height:60px;">
                    <td style="width:200px;">Pay Period Ending:</td>
                    <td>
                        <div class="input-daterange">
                            <div class="input-group date" id="payEnd">
                                <input type="text" class="form-control dpComponent" value="mm/dd/yyyy">
                                <span class="input-group-addon dpButton"><i class="fa fa-calendar-o dpIcon"></i></span>
                            </div>
                        </div>
                    </td>
                    </tr>
                <tr style="margin-bottom: 40px; height: 60px;">
                    <td>Pay Period Beginning:</td>
                    <td>
                        <div class="input-daterange">
                            <div class="input-group date" id="payStart">
                                <input type="text" id="dpPayrollEarningsEnd" class="form-control dpComponent" value="mm/dd/yyyy">
                                <span class="input-group-addon dpButton"><i class="fa fa-calendar-o dpIcon"></i></span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr style="margin-bottom: 40px; height: 60px;">
                    <td>Posting Date:</td>
                    <td>
                        <div class="input-daterange">
                            <div class="input-group date" id="payPosted">
                                <input type="text" id="dpPayrollEarningsEnd" class="form-control dpComponent" value="mm/dd/yyyy">
                                <span class="input-group-addon dpButton"><i class="fa fa-calendar-o dpIcon"></i></span>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr style="margin-bottom:40px; height: 60px;">
                    <td style="width:200px;">Report Date:</td>
                    <td><div id="reportDate">No dates currently selected</div></td>
                </tr>
                <tr>
                    <td></td>
                    <td style="text-align:right;"><button class='btn btn-primary' id='createReport' data-toggle="modal" data-target="#createReportModal">CREATE REPORT</button></td>
                </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>

<div class="modal fade" id="createReportModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" data-backdrop="false" style="height:700px;">
    <div class="modal-dialog" style="z-index:101;">
        <div class="modal-content" style="z-index:101;">
            <div class="modal-header bg-primary" id="createReportHeader">
                Create EFT Report
                <button style="vertical-align:top;" type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
            </div>
            <div class="modal-body" id="createReportBody">
                Are you sure you want to create a report for the following dates?
                <br /><br />
                <table>
                    <tr>
                        <td><strong>Report Date:</strong></td>
                        <td><div id="modalReportDate"></div></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" id="createReportFooter">
                <button class="btn" style="background-color:#FFFFFF; color:#00A4E5; width:100px;" data-toggle="modal" data-target="#createReportModal">CANCEL</button>
                <button class="btn" id="createReportOkBtn" style="background-color:#00A4E5; color:#FFFFFF; margin-left:20px ;width:100px;" data-toggle="modal" data-target="#createReportModal">OK</button>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.js"></script>

    <script type="text/javascript">

        $(document).on("click", "#createReportOkBtn", function () {
            alert("Report Being Created");
        });
        //Function to intialize the datepickers and constrain dates based on what is picked in each
        function setupDatepickers(dpStart, dpEnd) {
            //Setup the start datepicker
            $(dpStart)
            .datepicker({
                autoclose: true,
                format: "mm/dd/yyyy"
            })
            .on('changeDate', function (ev) {
                var startDate = ev.date;
                //don't allow end dates before the start date
                $(dpEnd).datepicker('setStartDate', startDate);
                //this gets you the current date
                var dpEndCurrentDate = $(dpEnd).datepicker('getDate');
                //if you pick a start date later than current date set endDatepicker startDate to that day
                if ((startDate > dpEndCurrentDate) || (dpEndCurrentDate === null)) {
                    $(dpEnd).datepicker('setDate', startDate);
                }
            });

            //Setup the end datepicker
            $(dpEnd)
                .datepicker({
                    autoclose: true,
                    format: "mm/dd/yyyy"
                })
                .on('changeDate', function (ev) {
                    var endDate = ev.date;
                    //don't allow start dates before the end date
                    $(dpStart).datepicker('setEndDate', endDate);
                    //this gets you the current date
                    var dpStartCurrentDate = $(dpStart).datepicker('getDate');
                    //if you pick an end date earlier than current date set startDatepicker startDate to that day
                    if ((endDate < dpStartCurrentDate) || (dpStartCurrentDate === null)) {
                        $(dpStart).datepicker('setDate', endDate);
                    }
                });
        }

        $(document).ready(function () {
            //setup the datepickers
            setupDatepickers('#payStart', '#payEnd');
            setupDatepickers('#payEnd', '#payPosted');
        });

        var startingDate;
        var endingDate;

        $('#payStart').change(function () {
            startingDate = $('#payStart').val;
            alert(startingDate);
            $('#reportDate').empty();
            $('#reportDate').append(startingDate + " - " + endingDate);
        });

        $('#payEnd').change(function () {
            endingDate = $('#payEnd').val;
            alert(endingDate);
            $('#reportDate').empty();
            $('#reportDate').append(startingDate + " - " + endingDate);
        });

        $(document).on("click", "#createReport", function () {
            $('#modalReportDate').empty();
            $('#modalReportDate').append(startingDate + " - " + endingDate);
        });
    </script>
}

So my question is: how can I put the value of #payStart and #payEnd into startingDate and endingDate, respectively? I know there are a ton of posts out there about this, but I can't make any of them work for me. Thanks for your help!

Answer 1

Two problems that I see right off the bat. 1.) The "#payEnd" selector is referring to the div instead of the input . 2.) "val" is a jQuery function, so to call it, you need to add parentheses.

Try changing:

endingDate = $('#payEnd').val;

To

endingDate = $('#payEnd input').val();