jquery datepicker number of rows and columns per month and year

user_4093142 0
Viewed 822

I need you to keep this 3x4 format

http://www.eyecon.ro/bootstrap-datepicker/ -> Limit the view mode to months

This format

Can you configure this from javascript or should it be done from css?

$.fn.datepicker.dates['es'] = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    today: "Today",
    clear: "Clear"      
};
$('.daterange-single-p').datepicker({ 
    autoclose: true,
    minViewMode: 1,
    language: "es-ES",
    format: 'mm-yyyy'
});
twitter-bootstrap datepicker jquery
1 Answers

Can you configure this from javascript or should it be done from css?

You can configure this in two steps:

  • set the viewMode to 2

  • .datepicker('setValue', value): set a new value for the datepicker. It cand be a string in the specified format or a Date object.

The first in order to show years and the second one to set the starting date

$('.daterange-single-p').datepicker({
   autoclose: true,
   minViewMode: 1,
   language: "es",
   format: 'mm-yyyy',
   viewMode: 2
}).datepicker('setValue', '01-2020');

In order to get the 3 rows X 4 columns you can simply add the following to the style:

.datepicker td span {
   width: 42px !important;
   margin-right: 0px !important;
   margin-left: 0px !important;
}


$.fn.datepicker.DPGlobal.dates['es'] = {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    today: "Today",
    clear: "Clear"
};
$('.daterange-single-p').datepicker({
    autoclose: true,
    minViewMode: 1,
    language: "es",
    format: 'mm-yyyy',
    viewMode: 2
}).datepicker('setValue', '01-2020');
.datepicker td span {
  width: 42px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mskasal/bootstrap-datepicker/master/css/datepicker.css">
<script src="https://rawgit.com/mskasal/bootstrap-datepicker/master/js/bootstrap-datepicker.js"></script>

<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <input class="span2 daterange-single-p" size="16" type="text" value="12-02-2012">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

user_38805850
Related