I am currently using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), but want to be able to select entire weeks in the calendar (Monday to Sunday), as well as display the week interval in the input field that I am selecting from. The default interval in the input field should be the week that you are currently in.
I have seen a somewhat similar method using jQuery UI to display the interval on jsfiddle.
C
I have tried editing this code to work for bootstrap-datepicker, without any luck.
Any idea how I can implement this for bootstrap-datepicker? :
Any help is highly appreciated!
You can try it.
Required file:
jquery-1.11.3.js
bootstrap-datepicker.min.js
bootstrap-datepicker.css
bootstrap.min.css
HTML
js
Screen Shot
JSFiddle link https://jsfiddle.net/shivamanhar/ddphp8jx/9/
A very quick solution: 1. Modify JS file: bootstrap-datepicker.js 2. Modify CSS file: bootstrap-datepicker3.css 3. Modify your code.
I have optimized the above mentioned examples.
HTML
JS
CSS
Check the link for demo: https://jsfiddle.net/IamMHussain/ozdrdbqf/1/
I am currently working on a project with the same requirement. Don't know where I found it, but this fiddle on http://codepen.io/chanduvkm/pen/yeXKGW addresses almost the same issue in a slightly different way, but using the bootstrap-datepicker library you are currently using. The default value could be easily added. However, the CSS of the active week fails when the option 'weekStart: 1' is set, which is what I actually need (ISO-8601 week starts on Monday).
In response to the previous answer by prakash, I forked the fiddle to start on Monday: https://jsfiddle.net/skfw0k53/ by adding the following:
So, basically two different libs to approach the problem.
I have used Bootstrap datetime picker in my project ran into same problem like yours When trying to select the weeks.
Got the below Solution on my own you can try it.
Required Files :
HTML :
JS : Used the moment.js for calculating the start and end of the week.
CSS :
Link to Working Code in JSFiddle :
https://jsfiddle.net/Prakash_Thete/9usq3enn/