Cannot read value from bootStrap datepicker

Question

I am currently using bootstrap datepicker and I have a problem. I want to read the value from the datepicker in the format (dd/mm/yyyy). However, I keep receiving an empty string even though the user selected a date value. Here are my codes

$('#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>

Have you seen this post: stackoverflow.com/questions/16681875/… — Wamadahama
– Wamadahama, Commented Jun 12, 2018 at 13:29
Possible duplicate of How to get the selected date value while using Bootstrap Datepicker? — Luis felipe De jesus Munoz
– Luis felipe De jesus Munoz, Commented Jun 12, 2018 at 13:30

Mamun · Accepted Answer · 2018-06-12 13:55:57Z

Try

$('#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>

Krzysztof Janiszewski · Accepted Answer · 2018-06-12 13:42:43Z

0

EDIT

.datepicker('getDate'); returns JavaScript date object

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>

edited Jun 12, 2018 at 13:42

answered Jun 12, 2018 at 13:35

Krzysztof Janiszewski

3,8293 gold badges21 silver badges38 bronze badges

1 Comment

Issaki Over a year ago

Hi, how to get the date only in dd/mm/yyyy? Because your solution gave me a more specific date which is not what I am looking for Thu Jun 14 2018 00:00:00 GMT+0800 (Singapore Standard Time)

Collectives™ on Stack Overflow

Cannot read value from bootStrap datepicker

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related