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.

enter image description here

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>

Well you have to give the inputs the class name = to datepicker. Second I don't know if this is just incomplete code but you also need to wrap that in script tags as well as a `jQuery(document).ready(function($) { });` — Chitowns24, Oct 22 '13 at 07:25
This could answer your question http://stackoverflow.com/questions/18382788/js-jquery-typeerror-jquery-datepicker-is-not-a-function — Bazinga777, Oct 22 '13 at 07:29
Changing name=datepicker wont help because jQuery is targeting the class and not the name — Bazinga777, Oct 22 '13 at 07:32
Maybe unrelated but is there any reason you are loading (what looks like) two versions of the jQuery library? ` ` — james246, Oct 30 '13 at 22:56

score 12 · Answer 1 · answered Oct 30 '13 at 09:24

12

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>

answered Oct 30 '13 at 09:24

Premdeep Mohanty

761
5
10

This is not the same as my answer? – Irvin Dominin Oct 30 '13 at 11:16
1

@IrvinDomininakaEdward The key difference is including the `$.datepicker` attachment inside a `$.ready` call - without that there's little 'guarantee' your script will be run *after* the `#filter-date` element has been created in the DOM – Brian North Nov 01 '13 at 07:16
1

@BrianNorth I don't think so, the main problem is that the date picker i not attached properly (as my answer), we don't have the real code so we can't know that is not already running it in dom ready; second there is the type=date (as my answer) the reason why is working on chrome – Irvin Dominin Nov 01 '13 at 10:32
Still does not work in Firefox. But it works in Chrome now without having set the type to date. – Anon Nov 02 '13 at 09:33

Irvin Dominin · Answer 2 · 2013-10-22T07:36:55.483

3

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).

edited Oct 22 '13 at 07:36

answered Oct 22 '13 at 07:31

Irvin Dominin

30,819
9
77
111

Will using id="filter-date" twice cause any conflicts ? – Bazinga777 Oct 22 '13 at 07:37
1

As I can see from the code the input element is created in a condition, so only one element at time will be exist – Irvin Dominin Oct 22 '13 at 07:46
Check the console for errors and you provide your HTML markup (not PHP) and JS code – Irvin Dominin Oct 22 '13 at 11:00

score 3 · Answer 3 · edited Nov 01 '13 at 16:48

3

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

edited Nov 01 '13 at 16:48

Irvin Dominin

30,819
9
77
111

answered Nov 01 '13 at 02:25

user2934760

31
2

score 2 · Answer 4 · answered Oct 29 '13 at 10:12

2

Try using something like this:

$(document).ready(function() {
    <?php if($_REQUEST["date"]){ ?>
    $('.datepicker').datepicker( "setDate", "<?php echo date('Y-m-d', strtotime($_REQUEST['date']));?>" );
    <?php }?>
});

answered Oct 29 '13 at 10:12

Rahul Gupta

9,775
7
56
69

score 2 · Answer 5 · edited May 23 '17 at 10:27

2

Just Try

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

If you want ot use jquery write

<input id="filter-date" size="16" type="text" />

if you use type="date" it will create confusion.

So that this targets input inside the div

DEMO

Also see this stackoverflow post Chrome type="date" and jquery ui date picker clashing

edited May 23 '17 at 10:27

Community

1
1

answered Oct 31 '13 at 06:03

Dev

6,628
2
25
34

score 2 · Answer 6 · answered Oct 31 '13 at 12:04

2

You must assign '.datepicker' class name to inputs

answered Oct 31 '13 at 12:04

Hamid Bahmanabady

665
1
8
20

score 1 · Answer 7 · answered Oct 26 '13 at 13:30

If you use bootstrap date picker than -

  <div id="divDatePicker" 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>

You should try to bind date-picker with element ID :

$('#divDatePicker').datepicker();

And also write your code in script block:

<script type="text/javascript">
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>

or

<script type="text/javascript">
      $(document).ready(function() {
          $('#divDatePicker').datepicker();
      });
</script>

Try This

score 0 · Answer 8 · answered Oct 26 '13 at 09:34

0

Here's a shorter version of the HTML:

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

Call the datepicker with (address the <input>, not the wrapping <div>)

$(document).ready(function() {
    $('#filter-date').datepicker();
});

answered Oct 26 '13 at 09:34

Reeno

5,720
11
37
50

hey that still doesn't work in Firefox> Check my update and have a look at the screen shot. – Anon Oct 26 '13 at 09:45
Please create a http://jsfiddle.net/ (without the PHP) with the relevant code. Or have a look at the console (press F12 in Firefox) – Reeno Oct 26 '13 at 12:18
I added jquery & jquery UI (on the left) and for me it's working perfectly in Firefox: http://jsfiddle.net/5hEna/ – Reeno Oct 26 '13 at 12:51
Show us your full page (maybe some other script is interfering with the datepicker) or press F12 on your site to load the console, reload the page and have a look on the output on the console. – Reeno Oct 26 '13 at 12:53
ok the fiddle works perfectly for me but once I put it into my actual page it doesn't work. I think my scripts are interfering with each other. I can't show you my page but let me add the list of the scripts that I am using have a look and see if you can find a problem. – Anon Oct 26 '13 at 13:09
Why do you include jQuery two times? jquery-1.9.1.js and jquery.min.js It would really help a lot if you look at the console – Reeno Oct 26 '13 at 13:15
I've removed those two entries and added a link to this instead: http://code.jquery.com/jquery-latest.min.js. The error I am getting on my console from jquery is TypeError:d.browser is undefined. – Anon Oct 26 '13 at 13:24
.browser has been removed from JQuery 1.9. So either take a version of JQuery below 1.9 (maybe some other scripts will stop working then when they rely on a newer version of jQuery) or remove the script which is accessing .browser – Reeno Oct 26 '13 at 13:30

score 0 · Answer 9 · answered Nov 01 '13 at 17:01

0

I have faced similar issue in some of the browsers because of the z-index which is assigned to the date picker ui. I used a work around like shown below which did the job.

    $(".datepicker input").datepicker({ dateFormat: "yy-mm-dd",beforeShow: function() {
        setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999);},0);
    }});

But before that, please use inspect element in mozilla to make sure the element with class .ui-datepicker is added in the dom somewhere.

answered Nov 01 '13 at 17:01

Althaf M

498
4
12

i tried that but it didn't work. On inspecting the element in Firefox i can see the class=hasDatepicker for the input but it still does not come up. How can I check this: "the element with class .ui-datepicker is added in the dom somewhere?" – Anon Nov 02 '13 at 08:18
1

Depending on the browser you can search for the class name. In safari inspect element , press Command + F and type in ui-datepicker, it will get you all the elements with that class. Usually it gets added just after the input element or just before the
closing tag. In any case the input element getting hasDatepicker class, means that query ui is displaying and the hasDatepicker is kind of functioning like a condition for the query ui to hide the element. check these screenshots [link](http://grab.by/rHKe) [link](http://grab.by/rHKc) @Paulie
– Althaf M Nov 03 '13 at 11:42

score 0 · Answer 10 · answered Feb 06 '15 at 05:19

You can user jQuery date picker in case of Mozilla: Check the browser using $.browser.mozilla but it will not work in jQuery>1.9, so you have to use jQuery Migration as shown below:

     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
    <script>
        if ($.browser.mozilla)
    {
        if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1900:2015",
                dateFormat: "yy-mm-dd",
                defaultDate: '1900-01-01'
            });
        });
    }

</script>

score 0 · Answer 11 · edited Sep 17 '15 at 12:34

0

This is Full and Final Answer For your Datepicker Problem in Firefox using html5 Answer :

<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>

<input type="date" name="event_date" required/>

edited Sep 17 '15 at 12:34

Malay M

1,659
1
14
22

answered Sep 17 '15 at 12:16

Ketan Patel

1
1

jQuery ui datepicker not working in Firefox

11 Answers11