Datetimepicker / Datepicker / Timepicker without Input Field

[FBosler]

I am fairly new to Github so please forgive me - should I be in violation of the etiquette with my question. This isn't really an issue but more of a problem I am having. I am trying to use the Datetimepicker (more precisely a Datepicker and a Timepicker) but without an input field.
I want a button with a calendar icon on it which opens the datepicker on click, after picking a date the button should change from a calendar icon to the chosen date.
Is there a way to achieve the desired result with Eonasdan Bootstrap-datetimepicker?
Thank you very much and keep up the good work!

[FBosler]

Even if it isn't possible, it would be great if somebody could tell me. Although its certainly going to be rubbish compared to Eonasdan DateTimePicker I guess I would have to start looking for another solution then. :(

[Eonasdan]

flattery is a great way to start :)

Presently, there's not really a way to use the picker without the input field. You can do something like this: http://jsfiddle.net/Eonasdan/516zsh7b/

In Version 5 ( #841) I'm hoping to uncouple the picker from the input field more so that people can use it like that.

[FBosler]

Splendid! Thank you for your quick reply. The fiddle is already a great start. I hope you don't mind me asking if its possible to obtain the set date? I assume its still stored somewhere in the hidden input field?

Also I toyed around a bit (http://jsfiddle.net/fbosler/516zsh7b/2/) and found that the toggling of the datetimepicker wouldn't work after changing the innerHTML of the button. Is there a good way around that?

Again, I really appreciate your work here!

[Eonasdan]

all the options are available via $('#datetimepicker').data("DateTimePicker").FUNCTION() so you can do $('#datetimepicker').data("DateTimePicker").date() which will give you a moment object of the current date. It will also be in the input box.

I don't know why changing the innerHtml would make a difference. You can "Update" or "Fork" the fiddler with your changes if you want.

[FBosler]

Sweet, didn't know that. Please find an updated fiddle that shows (sort of) what I want the picker to do. http://jsfiddle.net/fbosler/516zsh7b/3/

[Eonasdan]

this works. http://jsfiddle.net/Eonasdan/516zsh7b/4/

I would highly recommend listening to the change event (dp.change) instead of the button click as it won't update unless the user clicks the button again

[FBosler]

This is fantastic! Thank you so much. I updated the fiddle to reflect your suggestion. However, now it needs two clicks to open the DateTimePicker after the first time. Am I missing something here?
http://jsfiddle.net/fbosler/516zsh7b/5/

Update:
Figured it out (somehow - honestly not exactly sure why this works and the above doesn't). But this works as intended:
http://jsfiddle.net/fbosler/516zsh7b/6/

Thanks again for your help!

[Eonasdan]

hmmm looks like setting the html in the change event closes the picker, which may not be ideal for your situation. I'm not sure right off how to get around that.

A work around would be to have a span beside the button that held the value, set the span on change and leave the button as the icon.

also, if you only want the date you can adjust the format: option to what you need (to exclude the time).

[FBosler]

Hi Eonasdan!

As seen in http://jsfiddle.net/fbosler/516zsh7b/6/ I got the Date part working. However, the time part is still a bit buggy, any idea why? It says widget.find() is not a function. Please find attached the newest widget.
http://jsfiddle.net/fbosler/516zsh7b/7/

Thanks again!

[marianacapelo]

Hey!
I just noticed that the original fiddle (and solution) does not work with version 4.17.37.

Any idea why?

[ghost]

@marianacapelo Looks like using the button as the widget parent does not work on IE11 and Firefox (Chrome works fine). My current workaround is to use a parent <div> as widgetParent.

[link2pk]

Hi @Eonasdan/Anyone reading this ,
Is there any way by which I could use the inline mode on desktop and normal text mode on mobile devices like http://imgur.com/ZYovA4W i.e when i click on input type text on mobile it will open as a normal dropdown datetimepicker?

Many thanks for this great plugin.

[DJmRek]

If anyone has the same issue: The solution posted above don't shut on outside click anymore, because a hidden input can not be focused. I've implemented a quick'n'dirty work around by using the dp.show and dp.hide event and an click event registered to document. jsfiddle
Be careful and stop the Datetimepicker Click-Event from bubbeling up via event.stopPropagation. If you miss that, the picker does not show up, because it's closed rigth after show.