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>