Cara menggunakan datepicker bootstrap 4 w3schools

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://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'
        }