[英]Get String Value of Input With Date Selector
我正在嘗試制作一個頁面,我可以在其中傳遞從“輸入”框輸入的“ datepicker”中選擇的值,而且我不知道如何獲取這些值而不是[object]。
這是我的查看文件:
<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>
}
所以我的問題是:如何將#payStart和#payEnd的值分別放入startingDate和EndingDate? 我知道這里有很多帖子,但是我無法讓其中任何一個適合我。 謝謝你的幫助!
我馬上看到了兩個問題。 1.)“ #payEnd”選擇器引用的是div而不是input 。 2)“ val”是一個jQuery函數,因此要調用它,需要添加括號。
嘗試更改:
endingDate = $('#payEnd').val;
至
endingDate = $('#payEnd input').val();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.