Bootstrap Datepicker仅显示日期

Question

Is it possible to show only dates in Bootstrap datepicker ?

I am showing only months and years using following methods -

$("#year").datepicker({
    format: " yyyy", 
    viewMode: "years",
    minViewMode: "years"
});

$("#month").datepicker({
    format: " mm", 
    viewMode: "months",
    minViewMode: "months",
    maxViewMode: 0
});

A live demo showing only year and month selection in Year and Month field. I want to show only date from 1 to 31 without Month, Year at the top and also without day's name, at the Date field.

Answer 1

Yes, it is possible, but a bit complicated, you have to:

• Set the format option to d (or dd )
• Set maxViewMode option to 0 ( minViewMode is 0 by default)
• Hide prev/next month buttons and the month name button, you can do it using CSS:
  • the days view of the datepicker is inside a table that has .datepicker-days class
  • the prev and next button are inside the .datepicker-days table and they have .prev and .next classes
  • the month name is in the same table and it has the .datepicker-switch class
• The date datepicker should show the right number of days, so you have to dinamically update defaultViewDate when year and month are selected (see changeDate event)
  • Since the picker has no setter method for defaultViewDate , you can destroy it and then re-init it.

Here a full working sample:

 $(document).ready(function() { var dateOpt = { format: 'dd', maxViewMode: 0 }; $("#year").datepicker({ format: "yyyy", viewMode: "years", minViewMode: "years" }).on('changeDate', function(e) { var month = $('#month').datepicker('getDate'); if( !month ){ month = new Date(); } dateOpt.defaultViewDate = { year: e.date.getFullYear(), month: month.getMonth(), day: 1 }; // Reset date datepicker $('#date').datepicker('destroy'); // Re-init with defaultViewDate option $('#date').datepicker(dateOpt); }); $("#month").datepicker({ format: "mm", viewMode: "months", minViewMode: "months", maxViewMode: 0 }).on('changeDate', function(e) { var year = $('#year').datepicker('getDate'); if( !year ){ year = new Date(); } dateOpt.defaultViewDate = { year: year.getFullYear(), month: e.date.getMonth(), day: 1 }; $('#date').datepicker('destroy'); $('#date').datepicker(dateOpt); }); $("#date").datepicker(dateOpt) }); 

 /* Hide prev/next buttons and month name*/ .datepicker-days>table>thead>tr>th.prev, .datepicker-days>table>thead>tr>th.datepicker-switch, .datepicker-days>table>thead>tr>th.next { display: none; } /* Hide days of previous month */ td.old.day{ visibility: hidden; } /* Hide days of next month */ td.new.day{ display: none; } 

 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <div class="container"> <div class="form-group row"> <label class="form-control-label col-md-3" for="year">Year</label> <div class="col-md-9"> <input type="text" id="year" class="form-control"> </div> </div> <div class="form-group row"> <label class="form-control-label col-md-3" for="year">Month</label> <div class="col-md-9"> <input type="text" id="month" class="form-control"> </div> </div> <div class="form-group row"> <label class="form-control-label col-md-3" for="year">Date</label> <div class="col-md-9"> <input type="text" id="date" class="form-control"> </div> </div> </div>