Question: I'm designing a page that is supposed to allow users to submit possible computing science projects and at one stage the user will have to enter a duration that the project will run over. To make things easier on the user the I'm trying to fill out the from: to: fields using jQuery's datepicker method however I cannot get the script to run when the user selects the appropriate field.

So far I've got the following script:

```
<h:outputScript library="jquery" name="jquery-1.9.1.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.js"/>
<h:outputScript library="jquery" name="jquery-ui-1.10.3.custom.min.js"/>

<h:head>
    <title>Add project</title>

    <script type="text/javascript" id="setDate">
        $(function() {
            $(" #datepicker ").datepicker();
        });
    </script>
    <!-- rest omitted for readability -->

```

and my h:inputText looks like this:

```
<h:inputText id="setDate" value="" onclick="$('#datepicker').datepicker();"/>
<p>Date: <input type="text" id="datepicker" /></p>

```

I did try to make it work without using any jsf tags and managed to get it up and running but I just can seem to make it work with jsf tags.

The problem is that when in a browser the jQuery datepicker widget does not display upon clicking on the field. Clicking on the field defined using the standard `<input>` tag works correctly.

Any help is greatly appreciated, thanks.

Answer: 
Use custom dialog , here is the best example 

[custom dialog](http://www.mkyong.com/android/android-custom-dialog-example/)
As per your requirement u have to design custom dialog layout this layout contains one textview and 2 buttons which look as default alert dialog. and write listeners for two buttons and design buttons according to your requirement .