size : 'small'|'default'|'large'Default: 'default'

The size of the datepicker input.

Examples

Bootstrap 5

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="234" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ uiLibrary: 'bootstrap5', size: 'small' });
     $('#datepicker-default').datepicker({ uiLibrary: 'bootstrap5', size: 'default' });
     $('#datepicker-large').datepicker({ uiLibrary: 'bootstrap5', size: 'large' });
 </script>

  

Bootstrap 5 Font Awesome

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="234" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ uiLibrary: 'bootstrap5', iconsLibrary: 'fontawesome', size: 'small' });
     $('#datepicker-default').datepicker({ uiLibrary: 'bootstrap5', iconsLibrary: 'fontawesome', size: 'default' });
     $('#datepicker-large').datepicker({ uiLibrary: 'bootstrap5', iconsLibrary: 'fontawesome', size: 'large' });
 </script>

  

Bootstrap 4

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="234" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ uiLibrary: 'bootstrap4', size: 'small' });
     $('#datepicker-default').datepicker({ uiLibrary: 'bootstrap4', size: 'default' });
     $('#datepicker-large').datepicker({ uiLibrary: 'bootstrap4', size: 'large' });
 </script>

  

Bootstrap 4 Font Awesome

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="234" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="234" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', size: 'small' });
     $('#datepicker-default').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', size: 'default' });
     $('#datepicker-large').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', size: 'large' });
 </script>

  

Bootstrap 3

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="220" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="220" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="220" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ uiLibrary: 'bootstrap', size: 'small' });
     $('#datepicker-default').datepicker({ uiLibrary: 'bootstrap', size: 'default' });
     $('#datepicker-large').datepicker({ uiLibrary: 'bootstrap', size: 'large' });
 </script>

  

Material Design

    
 <p><label for="datepicker-small">Small Size:</label> <input id="datepicker-small" width="276" value="11/20/2022" /></p>
 <p><label for="datepicker-default">Default Size:</label> <input id="datepicker-default" width="276" value="11/20/2022" /></p>
 <p><label for="datepicker-large">Large Size:</label> <input id="datepicker-large" width="276" value="11/20/2022" /></p>
 <script>
     $('#datepicker-small').datepicker({ size: 'small' });
     $('#datepicker-default').datepicker({ size: 'default' });
     $('#datepicker-large').datepicker({ size: 'large' });
 </script>