CODEWITHSUNDEEP
javascriptjquerydatepicker
Anil Kumar
Anil Kumar

Reputation: 2741

JQuery : Increase the size of datepicker widget

The answer is to my question is here:. How to resize the jQuery DatePicker control.

But for some reason, It is only increasing the font size after selecting the date. But not the size of calendar that it shows. It is very small in size.

What can i do to increase it?

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://jqueryui.com//resources/demos/style.css">

In body

<input  class="form-control" type="text" id="datepicker" onchange="chart2()">

Style

<style>
        #datepicker {
            font-size: 20px;

        }
    </style>

This is how it is looking like

Upvotes: 1

Views: 1367

Answers (1)

iamawebgeek
iamawebgeek

Reputation: 2865

You need to override css options on http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css.
Two ways to do it:
- Make stronger selector by adding additional more classes, tags or any attributes
- Override the exact selector in file included later

Take the selector which is applied, copy to your custom css file or style attribute and apply your styles. You can open chrome html inspections and find there applied styles and their selectors after override it like below:

// for example: for .ui-datepicker table you can change its width
.ui-datepicker table {
  width: 80%;
}

Upvotes: 1

Related Questions