date picker

Level 122

You mean the datepicker from jQuery-UI ?

Make sure your CSS is in the < head >

Make sure the javascript is at the bottom

Open developer tools in your browser, network tab, reload the page. Look for any red entries

Switch to the console tab (in your browser), refresh the page and check for any messages.

Click on the field and check for messages.

Level 1

I get this:

Uncaught TypeError: $(...).datepicker is not a function

Level 122

It should be if all the files have loaded? No network errors?

Level 1

I got a 404 here

 <link rel="stylesheet" href="/resources/demos/style.css">

postitief

Level 5

The error means that your function for the datepicker hasn't been loaded. So you make a call to the datepicker but the js files isn't loaded jet. Or you are including the wrong js files, the ones that have no datepicker function!

Level 122

Thats fine, its just a stylesheet used on the jquery-UI website that you don't have on your own installation.

It's just used to style the demo - so thats not the problem

Level 122

As your code is verbatim from the jquery-ui website, I would expect it to work.

Can't tell if you have other things on the page affecting its loading. Can you paste the whole layout file?

Level 1

The file is to large to paste it here. But to keep things simple.. the link rel, link href, script tags and jquery function are in a layout.blade.php file The <input type="text" id="datepicker" size="30"> is in my view that extends the layout. I tried to put them all in the view, but still nothing new happens.

It seems to complicated, so I think I'm going to drop this idea and work on a date validator myself

Level 122

We are having to take on trust that the files are being loaded as you say.

Hopefully you will see in the network log, loading of jquery and the jqueryUI plugin

The problem boils down to the name of the datepicker not being recognised which means jquery-UI is not loaded.

We know jquery is loaded else there would be an error with the $ element

1 like

Level 1

@Snapey - if it's not too much, could you please list here the steps i need to follow in order to make this work ? Please take into account that i have a view.blade.php that extends layout.blade.php

Thanks.

vitorarjol

Level 10

@Texas Maybe the assets aren't load on the execution of your function. Try this instead:

$( document ).ready(function() {
    $( "#datepicker" ).datepicker();
});

thomaskim

Level 41

@vitorarjol That is the same thing as what he already has. $(function() { is the shortened version of $( document ).ready(function() {.

@Texas It is infinitely easier to help you after seeing what your code looks like. With only snippets, we can only guess as to what's going on.

1 like

Level 1

OK. I'll try to be as specific as I can. There are 2 files involved: layout1.blade.php and advancedsearch.blade.php. The second one extends the first one. These are rather large and I can't put them all here.

In of layout1.blade.php I have:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

At the bottom I have:

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

In advancedsearch.blade.php I have:

{!!Form::open()!!}
   {!!Form::input('text', 'StartDate', ["id"=>"datepicker"])!!}
{!!Form::close()!!}

The result is that I see the input field, but when I click on it, nothing happens. And the little icon at the right of the input field is not shown either. I'm quite sure that I didn't understand all the steps involved....

skliche

Level 42

@Texas Have a look at the html code of the rendered page in the browser. Do you actually see all that stuff there? Otherwise you might have a problem that your layout is not picked up.

If I just paste that stuff in a simple view and have that returned it works like a charm:
routes.php:

Route::get('datepicker', function(){
    return view( 'datepicker' );
});

datepicker.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datepicker</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
    <form>
        <input type="text" name="startDate" id="datepicker">
    </form>
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>
</body>
</html>

1 like

Level 122

when you get datepicker is not a function, does this happen immediately on page load or just when you click the date field?

Level 1

@Snapey - the problem WAS happening in page load... "was" because I fixed it in the meantime. Based on the example shown by skliche , in advancedsearch.blade.php right next to the input field I did this:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
                <span>{!!Form::text('StartDate',null, array('id'=>'datepicker'))!!}</span><br />
                <script>
                    $(function() {
                        $( "#datepicker" ).datepicker();
                    });
                </script>

(..I changed the input field to text) So I took every <script> from layout.blade.php and I added right were action should be... Although it seems a little extreme to me... So thank you all for your help... one last thing: how can I change the date format ?

rmariuzzo