jQuery UI functions are undefined inside another function

I have jQuery UI's datepicker function running on one of my pages. Stripping it way down, it works like this:

<form>
    <input type="text" name="date" id="date" />
</form>
<script type="text/javascript">
    jQuery("#date").datepicker();
</script>

Since this part works, I know the jQuery and jQuery UI scripts are included correctly, etc.

Now, I want to activate the date picker from inside one of my functions, like this:

<form>
    <input type="text" name="date" id="date" />
</form>
<a href="JavaScript:test();">test</a>
<script type="text/javascript">
    function test() {
        alert(jQuery("#date")); // this works as expected
        jQuery("#date").datepicker(); // this throws an error
    }
</script>

But when the datepicker function runs inside my function, JavaScript throws the error TypeError: 'undefined' is not a function (evaluating 'jQuery("#date").datepicker()'). It looks like the datepicker function is not available within the scope of my function, even though the jQuery("#date") object is available.

Does anyone have an explanation or a workaround for this?

UPDATE: After ragnarok56 posted the jsfiddle demonstrating the code working, I went back to my page to look more carefully at what might be affecting it. This is part of a larger system that administrators can customize by adding their own header and footer code, and it turns out that an administrator had added his own link to an older jQuery script in the footer. I removed that and my code worked as expected. I also replaced my jQuery include with his and my code still worked, so it seems the problem is not the old version of jQuery, but including jQuery twice. It seems strange that this would prevent the jQuery function from working inside a function but not outside a function, so I'll leave this open in case someone can provide an explanation of that behavior.