Questions regarding datetimepicker

[ScreamingTree86]

Hi,
i want to use the b:datetimepicker to filter a datatable. In order to use this i need an ajax call to filter the table and set the datepicker date inside the underlying bean. As the b:datetimepicker has no ajax abillitys i added this:

<b:dateTimePicker showDate="true" showTime="false" showTodayButton="true" placeholder="Datum"
    id="dateSelect" showClearButton="true" value="#{processingView.selectedDate}">
</b:dateTimePicker>
<script type="text/javascript">
    $("#form\\:circulationsTable\\:dateSelectinput").attr('onchange', "PF('circulationsTable').filter()");
</script>

With this it works perfectly if i change the date by myself. But it seems that no event is fired if i select a date from the calendar. Is there any event fired which i can use?

Another question is, how can i change the default glyphon icon of the datepicker button?

Last but not least, in my case the calendar element looks like this

in my web.xml i have set

    <context-param>
        <param-name>BootsFaces_THEME</param-name>
        <param-value>default</param-value>
    </context-param>
    <context-param>
        <param-name>BootsFaces_USETHEME</param-name>
        <param-value>true</param-value>
    </context-param>

But it looks quite different from your showcase http://showcase.bootsfaces.net/forms/DateTimePicker.jsf. Seems like there is missing the complete theme. Any ideas why?

€dit: i tried some things and found that this:

<b:dateTimePicker showDate="true" showTime="false" showTodayButton="true"
    placeholder="Datum"
    id="dateSelect" readonly="true" showClearButton="true"
   value="#{processingView.selectedDate}"/>
<script type="text/javascript">
    $("#form\\:circulationsTable\\:dateSelectinput").attr('onfocusout', "PF('circulationsTable').filter()");
    $("#form\\:circulationsTable\\:dateSelectinput").attr('onsubmit', "PF('circulationsTable').filter()");
</script>

works for my needs. If the user clicks an element inside the calendar the input field automatically losses focus. On the other hand if the user changes the inputfield data by typing in the field he has to press enter to submit the content. works...

But i found another problem. The popup widget is generated on click inside the parent element. but if the element is too small (e.g. if it is used inside a datatable header and the table is empty) you only see a part of the widget and have to scoll inside the parent element/component. In primefaces they use to generate the widget outside the parent form element to get around this problem. Maybe this would be the way to go here.

[stephanrauh]

Let's start with the change event. I didn't try yet, but judging from the documentation of the underlying JavaScript component there should be a jQuery event dp.changethat's fired when the date or time is changed. Also see http://eonasdan.github.io/bootstrap-datetimepicker/Events/.

[stephanrauh]

As for the theme: maybe - just maybe - our showcase works because it uses a component that uses a CSS resource the dateTimePicker needs. It's always a bit tedious and time-consuming to find this kind of errors. Maybe we can start by comparing the list of CSS files. Our showcase uses this list:

[stephanrauh]

As for the icon: we didn't make it configurable yet. We'll fix that in BF 1.0. Until then, I suppose you can overwrite the icon using some clever CSS. The HTML code looks like so:

<div class="input-group date ">
   ...
   <span class="input-group-addon">
      <span>
         <i class="glyphicon glyphicon-calendar"></i>
      </span> 
   </span>
</div>

So I'd try to construct a CSS constructor like ".input-group-date > input-group-addon > span > i" and set the image using an "!important" tag. That's a bit clumsy, but it should do the trick.

I've opened a ticket to track progress on making the icon configurable: #483 .

[stephanrauh]

As for AJAX: I've opened a separate ticket to track this feature request: #482.

[stephanrauh]

Please report us back if we've managed to answers your questions, so we can close the ticket. As stated above, I've opened separate tickets for AJAX and the configurable icon.

[ScreamingTree86]

Hi,
first of all thank you for the help :)

Lets get it point by point.

Change Event jep, the dp.change works well. Maybe for someone with the same problem my working code till 1.0 ;)

<div style="display: inline-block;vertical-align: top;width: 125px">
                                    <b:dateTimePicker showDate="true" showTime="false" showTodayButton="true"
                                                      placeholder="Datum"
                                                      id="dateSelect" readonly="true" showClearButton="true"
                                                      value="#{processingView.selectedDate}"/>
    <script type="text/javascript">
    $("#form\\:circulationsTable\\:dateSelect").on("dp.change", function (e) {
            PF('circulationsTable').filter();
    });
    </script>
</div>

Theme
€dit: Like you said. Its hard to find problems like this. I worked my way throug the parts of html code. at the basic th tags i found a part of the primefaces datatable css which is responsible for the problem.

.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
    padding: 4px 10px;
    overflow: hidden;
    border-width: 1px;
     border-style: solid; 
}

is set there. This is what causes the problem. So maybe someone with the same problem will find this helpfull :D

Icon this also works well. Maybe clumsy but till 1.0 the best way for me.

Thank you for opening the additional tickets to improve this nice component .

One last thing. As i added to my first post there are some problems with embeding this component into a datatable. I embedded some search and filterfields in the primefaces datatable header via

<f:facet name="header">
    <div class="ui-helper-clearfix gridComponent">
        <div style="display: inline-block;float: left">
            <div style="display: inline-block;vertical-align: top;width: 125px">
                 <b:dateTimePicker ... />
[...]
</f:facet>

The gridComponent Styleclass just removes the bottom margin from all underlying form-group elements in order to have a more compact tool bar.
If the datatable is empty it looks like this.

The date picker widget opens inside the datatable component itself. In general i would expect a behavior like the jq datepicker has. It adds the datepicker widget outside the corresponding main form to position the widget everywhere they want. Any ideas?

Again thank you for your help and the ongoing work to improve this nice piece of software 👍

[stephanrauh]

THX! Well, the PrimeFaces bit is annoying. We want BootsFaces to be compatible with PrimeFaces, but the CSS designers of Bootstrap and PrimeFaces don't talk with each other :(.

[asterd]

Hi @ScreamingTree86, in my latest commit (5bd644f), i think i've solved two of your requests: the first one is the icon customization option, that now can be configured as a bootstrap or fontawesome custom icon. The second one is related to your problem of date picker widget visualization inside datatable component. I've worked on the js library and now, the component has a new attribute (widgetParent) that you can use as an external "anchor" to prevent popop to go under the component area. Obviously, the popup still display near to the input field. To better understand, this is an example:

    <div id="picker-anchor" style="position:relative;">Anchor here</div>
    <div style="overflow:hidden;">
       <div class="form-group">
           <b:dateTimePicker iconAwesome="clock-o" widgetParent="#picker-anchor" />
        </div>
    </div>

without the widgetParent attribute, the popup will go under the overflow area and not display correctly. With the widgetParent attribute, instead, it display correctly.
I hope this can be useful for your project.
We have also to add Ajax support to this component, but for this, i need to check something with @stephanrauh.

[ScreamingTree86]

Hi,
sorry for the late response. I was out for holiday :)

I think this looks very good. Espacially the anchor construct. Thank you for the work. Are these changes already in the latest snapshot? Then i can test them...

Regards

[stephanrauh]

I've uploaded a new sneak preview version of BootsFaces to Maven Central a couple of minutes ago. As usual, see #369 on how to get it.

[stephanrauh]

Also, see the sneak preview demo at http://www3.bootsfaces.net/Showcase/forms/DateTimePicker.jsf.

[stephanrauh]

It seems like we've forgotten to close this ticket.