Pages

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Monday, June 21, 2021

Change the color and size of bootstrap datepicker


To select a date, I use a datepicker. I've met a problem when I tried to cutomize it, my goal was to change the color and the size of my datepicker.
This reminder summarize the main step to do this. I test this feature with the cakephp framework but it is also possible to use without this framework.

I used the following form and jquery method to initialize my component :

<form method='post' action='home' id='form_date' >

<input type="text"  name="chooseReportDate"  class='form_datetime' onchange= "document . getElementById('form_date') . submit(); return false;" value=""/>

</form>


<script type="text/javascript">
    $(".form_datetime").datepicker({
        format: "yyyy-mm",
        language: "fr",
        weekStart: 1,
        minViewMode: 1,
    });
</script>

To change the color and add a round corner, I set the following css :

input.form_datetime {
    background-color: red;
    border-radius:5px;

To change the background of my datepicker, I need to do the following :

.datepicker.dropdown-menu table  {
    background-color: pink;
}


Version :
bootstrap-datepicker.1.9.0.min.js
bootstrap 4.2.1
cakephp-3.8

Note :
I made the following import in the header.ctp file :

<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
    <?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('bootstrap_4.2.1.min.css') ?>
<?= $this->Html->css('bootstrap-select_1.13.9.min.css') ?>
<?= $this->Html->css('bootstrap-datepicker3_1.9.0.min.css') ?>
<?= $this->Html->css('all.css') ?>
<?= $this->Html->css('fontawesome.min.css') ?>
<?= $this->Html->css('brand.min.css') ?>
<?= $this->Html->css('solid.min.css') ?>
<?= $this->Html->script('jquery-3.4.1.slim.min.js') ?>
<!-- select date -->
<?= $this->Html->script('bootstrap-datepicker.1.9.0.min.js') ?>
<?= $this->Html->script('selectDate.js') ?>
<?= $this->Html->script('popper.1.14.6.min.js') ?>
<?= $this->Html->script('bootstrap.4.2.1.min.js') ?>
<?= $this->Html->script('bootstrap-select.1.13.9.min.js') ?>
<?= $this->Html->css('yuzu.css') ?>




PlayConsole : suppression des warnings lors de la publication (minify, symbole de debogage...)

Lors de la publication des versions dans la PlayConsole, j'avais 2 warnings pour indiquer qu'il était possible de réduire et d'o...