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

The size of the datetimepicker input.

Examples

Bootstrap 5

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

Bootstrap 4

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

Bootstrap 4 Font Awesome

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

Bootstrap 3

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

Material Design

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