How to Use Bootstrap datepicker

How to Use Bootstrap datepicker

bootstrap provides simple and attractive datepicker widget that we can use in html page wihtout any problem
 to use bootstrap datepicker with html or php we need to call cdn datepicekr js.

INDEX.HTML
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
      <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="date">Date</label>
        <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
      </div>
      <div class="form-group"> <!-- Submit button -->
        <button class="btn btn-primary " name="submit" type="submit">Submit</button>
      </div>
     </form>
     <!-- Form code ends -->

    </div>
  </div>  
 </div>
</div


JS TO ADD DATEPCIKER
<!-- Include jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include Date Range Picker  -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>


You can use bootstrap datepicker with simple jqueyr code
 <script>
  $(function() {
    $(".datepicker").datepicker({
          dateFormat: "yy-mm-dd",
         minDate: 0
    });

 
  });
</script>

But if you want more options then you can use this jQuery Code

<script>

    $(document).ready(function(){
      var date_input=$('.datepicker'); //our date input has the name "date"
      var options={
        setDate: new Date(),
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
        startDate: new Date() // To set start date of datepicker
      };
      date_input.datepicker(options);
    })

</script>

Other Options of Bootstrap datepicker
1. autoclose -> Close datepicker after date select
2. beforeShowDay =>   use this function to enable or disable specific day by returning true or false.
3. beforeShowMonth ->
4. beforeShowYear ->
5. beforeShowDecade ->
6. beforeShowCentury ->
7. calendarWeeks ->
8. clearBtn -> displays a “Clear” button at the bottom of the datepicker
9. container -> Appends the date picker popup to a specific element; eg: container: ‘#picker-container’
10. datesDisabled  ->  Disable the Array of date strings or a single date string.
11. daysOfWeekDisabled -> Days of the week that should be disabled.
12. daysOfWeekHighlighted -> Days of the week that should be highlighte
13. defaultViewDate -> Date to view when initially opening the calendar
14. disableTouchKeyboard -> If true, no keyboard will show on mobile devices
15. enableOnReadonly -> (TRUE OR FALSE) and if boolean value is true then the datepicker will not show on a readonly datepicker field.
16. endDate -> Set Max date
17. forceParse ->
18. assumeNearbyYear ->
19. format -> Set The date format
20. immediateUpdates ->
21. inputs ->
22. keepEmptyValues -> Only effective in a range picker
23. keyboardNavigation -> not allow date navigation by arrow keys
24. language -> The IETF code (eg “en” for English, “pt-BR” for Brazilian Portuguese) of the language to use for month and day names.
25. maxViewMode -> Set a max limit for the view mode.
26. minViewMode -> Set a minimum limit for the view mode.
27. multidate -> Enable multidate picking.
28. multidateSeparator -> Separate the multidates
29. orientation ->  Set the location of the picker popup’s
30. showOnFocus -> the datepicker show on focus
31. startDate   -> Set minDate of datepicker
32. startView  ->  Useful for date-of-birth datepickers.
33. templates -> Set template or use styles in datepicker
34. title -> Set the Title of datepicker
35. todayBtn -> displays a “Today” button at the bottom of the datepicker to select the current date
36. todayHighlight -> highlights the current date
37. toggleActive -> selecting the currently active date in the datepicker will unset the respective date.
38. weekStart -> Day of the week start.
39. zIndexOffset  -> Set z-index css of bootstrap datepicker

So thats all options of  bootstrap datepicker.





Related Posts-

Tutorial -  How to use Bootstrap Datepicker
Bootstrap datepicker with input field
How to set minDate in Bootstrap datepicker
All options of bootstrap datepicker