Search code examples
javascriptdatepickerbootstrap-datepickermonthcalendar

Bootstrap datePicker(Months and years only) wont show properly

I found a code that will provide a datepicker input box which allow to choose only month and year, but the output did show the correct date i've chose, but still the select box still showing the date.

Pict 1 is the condition before I choose any date https://i.sstatic.net/Wl6KT.png

Pict 2 is the condition after I choose any date https://i.sstatic.net/uwS9e.png

<div class='input-group date datepicker' id='table'>
    <input type='text' name="tgl" class="form-control" />
         <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
             </span>
</div>

Here's the javascript

$('#table').datepicker({
    format: 'MM/yyyy', 
    icons: {
        time: 'fa fa-time',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});

Im sure i did import the bootstrap

Solution

  • You might want to add the following properties to your datepicker initialization:

    startView: "months",
minViewMode: "months"

    Working example:

    $('#table').datepicker({
  format: 'MM/yyyy',
  icons: {
    time: 'fa fa-time',
    date: 'fa fa-calendar',
    up: 'fa fa-chevron-up',
    down: 'fa fa-chevron-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-screenshot',
    clear: 'fa fa-trash',
    close: 'fa fa-remove'
  },
  startView: "months",
  minViewMode: "months"
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class='input-group date datepicker' id='table'>
  <input type='text' name="tgl" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>