Skip to main content

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
Labels:

Comments

Post a Comment

Popular posts from this blog

Convert website to android and ios application using react native expo webview

Convert website to android and ios application using react native expo webview If you want to check you can check on github by using below link also dont forget to give star ;) Source Code: https://github.com/shubham715/react-native-expo-webview-convert-website-to-app React native is the best choice to create multi platform mobile application , but sometimes we dont want to write a complete application because we already have a web application or a website and its complicated to manage both . So we have a solution for this problem. React native supports webView that makes easy to run any website url like an app natively. What is webview in react native? In React native, WebView helps to show web content in a native view. For this tutorial we will use EXPO. What is EXPO ? EXPO a set of tools to help you quickly start an app. Expo have many inbuilt components that helps to simplify the development and testing of React Native app. So please follow the below steps to c...
45 comments
Read more

Solution-windows 'expo' is not recognized as an internal or external command

Solution for expo is not recognized as an internal or external command,operable program or batch file in Windows 10 Sometimes expo will not work globally mostly in windows 10, If you are facing same issue then follow the below Steps 1) Click on windows button and search for  " Environment variables"  and click on "Edit the system environment variables" 2) Now you will see a popup like below screen. Then you need to click on Environment Variables. (Please see highlight part in below image)     3)Then click on new button that i have highlighted in below image 4. Then a popup will open and you need to fill details like below mentioned Variable Name :Path Variable Value: %USERPROFILE%\AppData\Roaming\npm Here we are creating a new path variable and passing location of npm.   Now Click on OK and close all the terminal windows and open new CMD or terminal and type Expo . Great now you can access expo from any...
23 comments
Read more

Read files from folder using php

Read files from folder using PHP Today we learn how to read all files from a folder . we will learn to list all files and read all files . So please follow below steps:-   METHOD 1 1) List all files from folder If you want the list of all files in a folder then you can do by using below code //Get a list of file paths using the glob function. $allFilesList= glob('myfolder/*'); //Loop through the array that glob returned. foreach($allFilesList as $filename){ //Simply print them out onto the screen. echo $filename; echo '<br>'; } The above code will print list of all files like file1.jpg file2.png file3.gif file4.pdf   If you want to read only specific extension file like you just want to a list of all png files then you can do it by using below code. //Get a list of all files ending in .txt $fileList = glob('myfolder/*.png);   METHOD 2 Here is the second method. here we are using scandir() function to s...
1 comment
Read more