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.
- Download the Datepicker.
- Unpack zip to the certain location on your disk.
- Open x_datepicker folder.
- Create a new file and name it sample.html.
- 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
- 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” />)
- Add this simple form to your site. Paste the code below between the <body> and </body> section :
- 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:
- 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.
- Full code below