The default bootstrap datepicker that shows up, say on the click of an input control.
I need to change the stylesheet/css to make it wider and pad the days-of-month, so that there's more space between the numbers.
Hi sansircar,
Refer below sample code.
HTML
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { padding: 20px !important; } .datepicker, .table-condensed { width: 400px; } .table-condensed td { padding-top: 30px !important; } </style> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <link media="screen" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <script type="text/javascript"> $(function () { $('[id*=txtDate]').datepicker({ changeMonth: true, changeYear: true, format: "dd/mm/yyyy", language: "tr" }); }); </script> </head> <body> <input name="txtDate" type="text" readonly="readonly" id="txtDate" /> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.