Bootstrap freebies: Datepicker – installation guide

The tutorial below will explain to you step by step how to implement one of  our bootstrap freebies – the Datepicker – in your webpage. You can get it for free here.

  1. Download the Datepicker.
  2. Unpack zip to the certain location on your disk.
  3. Open x_datepicker folder.
  4. Create a new file and name it sample.html.
  5. Open the file in an editor and paste the content below:

    Note: This is framework of very basic HTML page which will be extended in the next steps. Now we will import some cascading  stylesheets to our framework

  6. Import the CSS card style sheet into your document.
    Place the code below between the <head> and </head> section:

    Note: If you store css files in different location keep in mind that you have to adjust the location (i.e. <link href=”location/of/css/files/bootstrap.css” rel=”stylesheet” />)

  7.  Add this simple form to your site. Paste the code below between the <body> and </body> section :

    That will create a simple form in which the user user can provide his name, surname and date of birth.

  8. Apply the Datepicker to the birthdate field.
    Add “datepicker” class to <input type=”text” name=”birthdate” class=”form-control”>. It will look like this:

    <input type=”text” name=”birthdate”  class=”form-control datepicker”>

    Add the code below before the </body> tag:

    Now when the user clicks on the 3rd field, he will see a nice Datepicker menu as below:

  9. Adjust the Datepicker
    You can set the first day of the week to a custom value. In order to do that the change value of:  weekStart:1, you can use
    0 for Sunday
    1 for Monday
    2 for Tuesday
    3 for Wednesday
    4 for Thursday
    5 for Friday
    6 for Saturday You can also adjust the color of the current date highlighted by adjusting the value of:  color: ‘red’, try i.e. blue.
  10. Full code below

 

Check our other bootstrap freebies!

One thought on “Bootstrap freebies: Datepicker – installation guide

Leave a Reply

Your email address will not be published. Required fields are marked *