JQuery UI Date Picker Focus

Question

I have implemented JQuery UI Datepicker but have two problems with the functionality. Implemetation code is below

<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker").datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-100y:c+nn'
        });
    });
</script>

1st Issue: On a standard page this seems to work fine although the calendar loses focus when a day is picked. As I am from the UK and focusing on UK users, our normal date formatting is to start with the day->then select month-> then select year. As a usability issue it appears most users I have tested this on start by inputting the day hence where the datepicker disappears. Is there an easy way to format the ui to lose focus on clicking on the year ?

Another issue I am having is combining the ui with a bootstrap modal. There seems to be a conflict stopping the month and year dropdowns functioning correctly. I have tried altering the z-index of the date picker css with little success.

Answer 1

If you're already using jquery-ui for the date picker, why not go ahead and use it for the modal dialog as well? It may simplify your build a little if you only leverage one set of libraries.

You could display the date picker "inline", embedded in the modal instead of in an overlay and then use the altField option to populate the field of your form.

Something like this:

Working Example

<form>Date:
    <input class="date"></input>
    <div id="dialog-message" title="Pick A Date">
        <div class="datepicker"></div>
    </div>
</form>

$('.date').click(function () {
    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        yearRange: '-100y:c+nn',
        altField: ".date"
    });
    $("#dialog-message").dialog({
        modal: true,
        resizable: false,
        width: 340,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});