jQuery ui datepicker not working in Firefox

Question

Here's my datepicker which isn't working in Firefox

  <div class="input-append datepicker">
              <?php if($_REQUEST["date"]){ ?>
                <input id="filter-date" size="16" type="date" value="<?php echo $_REQUEST["date"];?>"/>
              <?php } else { ?>
                <input id="filter-date" size="16" type="date" value="<?php echo date('Y-m-d');?>"/>
              <?php } ?>
    </div>

$('.datepicker').datepicker();

What can I do to fix this?

UPDATE

Here's how Firefox renders it.

ANOTHER UPDATE

Here are the scripts that I'm using:

<script type="text/javascript" src=".../lodash.min.js"></script>
<script type="text/javascript" src=".../jquery.min.js"></script>
<script type="text/javascript" src=".../jquery-1.9.1.js"></script>
<script type="text/javascript" src=".../jquery-ui.js"></script>
<script type="text/javascript" src=".../jquery.dataTables.min.js"></script>
<script type="text/javascript" src=".../DT_bootstrap.js"></script>
<script type="text/javascript" src=".../datatables.responsive.js"></script>
<script type="text/javascript" src=".../dom-bootstrap.js"></script>

Answer 1

Paulie, You should use this script:

<script type="text/javascript" src="Include/JS/jquery-ui-min.js"></script>

And

<script type="text/javascript" >
     $(document).ready(function () {
            $("#filter-date").datepicker({
                dateFormat: 'yy/mm/dd'
            });
        });
</script>

You need to apply datepicker to an input control of type text. So try this my making these changes in your code.

<div class="input-append datepicker">
  <?php if($_REQUEST["date"]){ ?>
  <input id="filter-date" size="16" type="text"
                    value="<?php echo $_REQUEST["date"];?>"/>
  <?php } else { ?>
  <input id="filter-date" size="16" type="text" 
                    value="<?php echo date('Y-m-d');?>"/>
  <?php } ?>
</div>

Answer 2

I start from the fact that you have included right jQuery and jQuery UI in your page.

Now your are attaching the datepicker with this selector:

$('.datepicker').datepicker();

you must give your element the datepicker class eg:

<?php if($_REQUEST["date"]){ ?>
    <input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo $_REQUEST["date"];?>"/>
<?php } else { ?>
    <input id="filter-date" class="datepicker" size="16" type="text" value="<?php echo date('Y-m-d');?>"/>
<?php } ?>

or bind your datepicker with id selector like:

$('#filter-date').datepicker();

PS: I suggest you to don't use type="date" or Chrome will render the datepicker twice (its behaviour and plugin).

Answer 3

You use a wrong selector, it's should be $('#divDatePicker').datepicker();, direct to the input not parent.