How to setup bootstrap responsive date picker range with icons
This is a follow up question of
https://www.experts-exchange.com/questions/29087446/Jquery-based-responsive-date-picker.html
The typical example only shows the date range with no icons:
https://uxsolutions.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=bottom+auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on&toggleActive=on#sandbox
My current requirements are:
- Responsive (must work Real Ipad and mobile galaxy)
- When day is selected the date picker must close.
- When picker is shown, it must open down the picker location.
- Date range must work with icons and have similar behaviour as per current sample link.
- It supports IE11 onwards, Chrome (latest and previous 3 releases) and Safari.
- It supports Iphone 7 and up and Galaxy S5 and up.
We are currently using Bootstrap latest 3.x version and Jquery 1.12.x
https://www.experts-exchange.com/questions/29087446/Jquery-based-responsive-date-picker.html
The typical example only shows the date range with no icons:
https://uxsolutions.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=bottom+auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on&toggleActive=on#sandbox
My current requirements are:
- Responsive (must work Real Ipad and mobile galaxy)
- When day is selected the date picker must close.
- When picker is shown, it must open down the picker location.
- Date range must work with icons and have similar behaviour as per current sample link.
- It supports IE11 onwards, Chrome (latest and previous 3 releases) and Safari.
- It supports Iphone 7 and up and Galaxy S5 and up.
We are currently using Bootstrap latest 3.x version and Jquery 1.12.x
ASKER
I know how to add the icon but what is need is the associated JQuery code. (As per answers of previous related question)
In its current form the date range example does not support icons (<span class="input-group-addon">
In its current form the date range example does not support icons (<span class="input-group-addon">
it support the icon look and feel but the icons won't be clickable to open the calendar view like it does with the Component mode.
This is not possible out of the box as Component mode (with clickable icon) and Date range mode don't work together.
This will required JS code modification to make it work the same way.
What I would do is to use 2 calendars FROM TO using Component mode to make the date range and adapt the CSS so it look like there are attached (if this is required) not important from my point of view.
or you may like this datepicker
http://www.daterangepicker.com/#config
This is not possible out of the box as Component mode (with clickable icon) and Date range mode don't work together.
This will required JS code modification to make it work the same way.
What I would do is to use 2 calendars FROM TO using Component mode to make the date range and adapt the CSS so it look like there are attached (if this is required) not important from my point of view.
or you may like this datepicker
http://www.daterangepicker.com/#config
ASKER
I already know that., thus the reason I need CSS/JS code to tinker it and if someone has already done it great it saves me the time I do not need to reinvent the wheel. Sadly it is bit too late in the project to change date picker components as most of the single date picker pages have been tested and sign off by business.
This is going to be a lot of work to get what you want, I mean you will have to rewrite the plugin, We cannot code this for you...
And this will need to be test by your QA team.
I have checked the code and there is no easy way to do it.
The solution of using 2 calendar inputs using Component mode, seem the effortless and quicker solution.
This way to From and To with the icons, so this way you keep the same plugins, and save time and money...
And this will need to be test by your QA team.
I have checked the code and there is no easy way to do it.
The solution of using 2 calendar inputs using Component mode, seem the effortless and quicker solution.
This way to From and To with the icons, so this way you keep the same plugins, and save time and money...
ASKER
I ended up replacing the range component for the time being until I have time to write more Jquery code to modify behaviour without altering the plug-in.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Orientation:
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#orientation
Autoclose:
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#autoclose
Yes there are no icons, because most of the time we use place holder From To in each input.
About the icons itself you can add this
Open in new window
to add the iconbut if you need the click on that icon (like the component) you will to adjust the JS code .
Component mode and date range mode don't work together by default.
What you can do is to have to separate input field using component so you will have the icon work correctly.