In this tutorial you’ll learn to use simple datepicker in your form. Using Bootstrap 4 datepicker, you’ll easily choose the go back a calendar rather than typing manually.Here in below example we use bootstrap 4 datepicker which goes hottest and has full-featured libraries.
The following example will tell you ways to line datepicker using bootstrap datepicker.
HTML
<div class="container"> <h2>Bootstrap Datepicker Examples</h2> <div class="row"> <div class="col-md-3"> <input class="form-control" type="text" placeholder="Salect Date" id="example1"> </div> </div> </div>
Javascript
<script type="text/javascript"> $(document).ready(function () { $('#example1').datepicker({ format: "dd/mm/yyyy" }); }); </script>
Add these Files in Head section
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
// Strings and translations monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], showMonthsShort: undefined, showWeekdaysFull: undefined, // Buttons today: 'Today', clear: 'Clear', close: 'Close', // Accessibility labels labelMonthNext: 'Next month', labelMonthPrev: 'Previous month', labelMonthSelect: 'Select a month', labelYearSelect: 'Select a year', // Formats format: 'd mmmm, yyyy', formatSubmit: undefined, hiddenPrefix: undefined, hiddenSuffix: '_submit', hiddenName: undefined, // Editable input editable: undefined, // Dropdown selectors selectYears: undefined, selectMonths: undefined, // First day of the week firstDay: undefined, // Date limits min: undefined, max: undefined, // Disable dates disable: undefined, // Root picker container container: undefined, // Hidden input container containerHidden: undefined, // Close on a user action closeOnSelect: true, closeOnClear: true, // Events onStart: undefined, onRender: undefined, onOpen: undefined, onClose: undefined, onSet: undefined, onStop: undefined, // Classes klass: { // The element states input: 'picker__input', active: 'picker__input--active', // The root picker and states * picker: 'picker', opened: 'picker--opened', focused: 'picker--focused', // The picker holder holder: 'picker__holder', // The picker frame, wrapper, and box frame: 'picker__frame', wrap: 'picker__wrap', box: 'picker__box', // The picker header header: 'picker__header', // Month navigation navPrev: 'picker__nav--prev', navNext: 'picker__nav--next', navDisabled: 'picker__nav--disabled', // Month & year labels month: 'picker__month', year: 'picker__year', // Month & year dropdowns selectMonth: 'picker__select--month', selectYear: 'picker__select--year', // Table of dates table: 'picker__table', // Weekday labels weekdays: 'picker__weekday', // Day states day: 'picker__day', disabled: 'picker__day--disabled', selected: 'picker__day--selected', highlighted: 'picker__day--highlighted', now: 'picker__day--today', infocus: 'picker__day--infocus', outfocus: 'picker__day--outfocus', // The picker footer footer: 'picker__footer', // Today, clear, & close buttons buttonClear: 'picker__button--clear', buttonClose: 'picker__button--close', buttonToday: 'picker__button--today' }