How to change bootstrap datepicker to look like Jquery UI datepicker - javascript

I am using bootstrap datepicker in my project but client wants easy selection for years like Jquery UI where user can select years from drop down.
I dont want to change my library because I have used it in so many places is there any easiest way to change the year/month selection within bootstrap datepicker.

Related

Customizable Angular datepicker

Do you know an Angular datepicker which has input features like:
Keyboard navigation (e.g. keydown for previous day, keyup for next day) in the input field (so I don't mean in the datepicker popup)
Autocomplete, e.g. when you fill in 12/12 and tab away, it automatically fills in 12/12/2019
Keys for specific actions, e.g. T fills in today's date
Or a datepicker which can be easily customized to work like this?
I found that datepickers from libraries like Kendo and Syncfusion try to do too much and are therefore difficult to customize to our needs. They focus on the datepicker popup, while the input field is hard to work with without mouse.
(the old ASP.NET Peterblum components had all this user-friendly functionality which does not seem to be available in modern frameworks, see: http://peterblum.com/DES/DateAndTime.aspx#DateTextBox).
You can find some date-pickers written in angular here, https://angularscript.com/?s=datetime+picker+. Most of these are customizable as your needs. Thanks

Angular UI Bootstrap datepicker is hidden within uigrid

I am integrating Angular UI Bootstrap datepicker within ui-grid, but i am facing an issue. When the user opens the datepicker by clicking a cell the datepicker is displayed but within ui-grid because of which user cannot see the full calendar and has to scroll.
Image: https://i.stack.imgur.com/AJ67m.png
It's not clear that you are using the datepicker popup instead of the inline datepicker. So, the first recommendation would be to use datepicker popup. Second, set the datepicker-append-to-body option to true to get it to attach to the document body rather than the grid cell it's defined in.

jQuery UI datepicker - closes with a custom selectmenu

I have jQuery UI installed and am currently having an issue with the datepicker widget. I have the calendar displayed when you click on the icon and it is generated. The calendar has a select menu for Month and Year. I am using the jQuery UI custom select menu.
When I go to make a selection for the selectmenus, the option selected closes/discards the entire datepicker.
My assumption is that there is an event being triggered to close the datepicker when you click outside of the main widget. The custom selectmenu is not the standard 'select' menu with 'options', but rather a bunch of 'spans'. The code is simply acknowledging the click on the custom selectmenu options as a field outside of the original widget.
Any suggestions or assistance to prevent this trigger or help me locate where this event is firing from, feel free to help me out. Thanks

Jquery UI timepicker slider and select

I'm using Trent Richardsons Timepicker plugin: http://trentrichardson.com/examples/timepicker/
As you can see in the demo, there is a method to switch the picker to a select format.
What I'm trying to achieve is to append the select method straight underneath the default slider - at the moment you can only have either the slider, or the select, not both at once.
I can see in the docs that you can create a custom control type to change the output of the select using $.timepicker.setDefaults({controlType:myControl}) - and then writing a custom function. Should I be somehow creating a new function that merges both the slider and select together?
Any tips at what I should be doing for this?

jQuery DatePicker & DateTimePicker

I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle

Categories