无法从引导日期选取器读取值

Question

我目前正在使用引导日期选择器，但我有一个问题。我想以 (dd/mm/yyyy( 格式从日期选择器读取值。但是，即使用户选择了日期值，我也不断收到空字符串。这是我的代码

$('#startDateInput').datepicker({
format: 'dd/mm/yyyy',
});
$('#saveButton').on('click', function () {
var collectedStartDate = $('#startDateInput').datepicker().val();
alert(collectedStartDate);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<div class="form-group col-md-12">
<label class="control-label col-md-4" for="startDateInput">Start date</label>
<div class="input-group date" id="startDateInput" style="max-width: 280px" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-md-1"></label>
<div class="col-md-10">
<div class="pull-right">
<input type="button" class="btn btn-primary" value="Save" id="saveButton" />
</div>
</div>
</div>

Answer 1

试试

$('#startDateInput').data('datepicker').getFormattedDate('dd/mm/yyyy')

$('#startDateInput').datepicker({
format: 'dd/mm/yyyy',
});
$('#saveButton').on('click', function() {
var collectedStartDate = $('#startDateInput').data('datepicker').getFormattedDate('dd/mm/yyyy');
alert(collectedStartDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<div class="form-group col-md-12">
<label class="control-label col-md-4" for="startDateInput">Start date</label>
<div class="input-group date" id="startDateInput" style="max-width: 280px" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-md-1"></label>
<div class="col-md-10">
<div class="pull-right">
<input type="button" class="btn btn-primary" value="Save" id="saveButton" />
</div>
</div>
</div>

Answer 2

编辑

.datepicker('getDate');返回 JavaScript 日期对象

var dateInput = $('#startDateInput').datepicker({
format: 'dd/mm/yyyy',
});
$('#saveButton').on('click', function() {
var collectedStartDate = dateInput.datepicker('getDate');
alert(collectedStartDate.getDate() + '/' + (collectedStartDate.getMonth() + 1) + '/' +  collectedStartDate.getFullYear());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<div class="form-group col-md-12">
<label class="control-label col-md-4" for="startDateInput">Start date</label>
<div class="input-group date" id="startDateInput" style="max-width: 280px" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-md-1"></label>
<div class="col-md-10">
<div class="pull-right">
<input type="button" class="btn btn-primary" value="Save" id="saveButton" />
</div>
</div>
</div>