Pages

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') ?>




No comments:

Post a Comment

Débutez en crypto-monnaie de manière ludique avec les projets "Move to earn"

Les projets "Move to earn" sont des projets très en vogue en ce moment dans le monde de la crypto-monnaie. Le principe est simple ...