Why is my Anytime DateTimePicker jQuery plugin remaining a common textbox?

Question

I'm trying to test out the Anytime combination Date/Time picker jQuery plugin (http://www.ama3.com/anytime/).

I downloaded the js and css files and placed them in a folder on my dev machine.

In jsfiddle.net, I've added these with a full path to the External Resources section, zB: C:\Duckbill\anytime.compressed.js C:\Duckbill\anytime.compressed.css -and added this after those, too: //ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.1.min.js

I've got this html:

<tr>
            <td>
                <input type="text" name="anytime" id="anytime" />
            </td>
            <td>
                <input type="text" name="field1" id="field1" />
            </td>
            <td>
                <input type="text" name="field2" id="field2" />
            </td>
        </tr>

...and this jQuery:

$(function () {
    AnyTime.picker("anytime");
    AnyTime.picker("field1");
    $("#field2").AnyTime_picker();
});

...yet when I Run it, none of these attempts succeed; it just displays three "regular old" text boxes in the "Results" pane.

What am I doing wrong?

UPDATE

Here's what works in jsfiddle, with External Resources references to the .js and .css files on anytime's server, as well as a reference to the migrate .js on ajax.aspnetcdn.com/:

HTML:

<table>
    <tr>
        <td class="labelText">
            <label for="BeginDateTime">Begin Date/Time</label>
        </td>
        <td>
            <input type="text" name="BeginDateTime" id="BeginDateTime" />
        </td>
        <td class="labelText">
            <label for="EndDateTime">End Date/Time</label>
        </td>
        <td>
            <input type="text" name="EndDateTime" id="EndDateTime" />
        </td>
    </tr>
. . .

jQuery:

$(function () {
    AnyTime.picker("BeginDateTime");
    AnyTime.picker("EndDateTime");
});

Or, could you look in your console (press F12 in most browsers) and see if there's an error? I'm willing to bet that there's a `resource not found` error. — Ohgodwhy, Apr 29 '13 at 20:42
@SamHuckaby* http://jsfiddle.net/MXBDq/ *I can't help but think now of Sam Clemens and "Huckaby" Finn. — B. Clay Shannon-B. Crow Raven, Apr 29 '13 at 20:53
@Ohgodwhy: Mashing F12 in jsfiddle brings up a Firebug-looking "dashboard" (or what have you) at the bottom of the page, but as I am in Chrome, I reckon it's something else... — B. Clay Shannon-B. Crow Raven, Apr 29 '13 at 20:56
That's the developer tools. In that dashboard, you click `console` to see if there are any errors. in the fiddle you linked, you have an error in your code; if I fix the error, it works as intended, I think?[http://jsfiddle.net/MXBDq/1/](http://jsfiddle.net/MXBDq/1/). I've removed the jQuery DatePicker so we could localize it. — Ohgodwhy, Apr 29 '13 at 21:00
That's an *old* version of my fiddling; it must not save when running. — B. Clay Shannon-B. Crow Raven, Apr 29 '13 at 21:10

score 2 · Accepted Answer · answered Apr 29 '13 at 20:42

2

Try removing the $ from in front of the first AnyTime.picker("anytime") line. Did you look at the code in a debugger? If so, it should report that $AnyTime is not defined, or something along those lines.

answered Apr 29 '13 at 20:42

Andrew M. Andrews III

1,989
18
23

You'll also need the Migrate plugin if you're using jQuery 1.9+ – Andrew M. Andrews III Apr 29 '13 at 21:17
Yes, I added to External Resources in Fiddler: http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.9.1.min.js which matches the version of jQuery I've got selected in jsFiddler, but the first problem, preventing anything good from happening, is that I'm referencing local versions of the anytime.css and .js (see my update for details). – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 21:30
You do realize that the picker does not remove the text boxes, right? The picker appears when the text box gets focus. If you want the pickers to show INSTEAD OF the text boxes, pass the options: {hideInput:true,placement:"inline"} – Andrew M. Andrews III Apr 29 '13 at 21:40
Also, you might want to play around with the simple example http://www.ama3.com/anytime/simple.html as a way to narrow down your problem. Also, be sure to read all of the troubleshooting tips at http://www.ama3.com/anytime/#tips – Andrew M. Andrews III Apr 29 '13 at 21:42
I found an example somewhere (can't recall now where, whether it was on your site or elsewhere), that showed linking to the files on your site, such as adding the following as External Resources in jsfiddle: http://www.ama3.com/anytime/AnyTime/anytime.compressed.css I don't know if you don't want this, but it does work now, once I replaced the references to my local file with those URLs. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 21:48
If you link to my js file then you'll get annoying popups when the page is loaded; you should put a copy on your own server instead. – Andrew M. Andrews III Apr 29 '13 at 21:51
I don't know how that would work as far as jsfiddle goes; I guess I'll deal with the annoying popups if you don't mind me referencing those files. After all, jsfiddle is just for, as the name indicates, fiddling around until I'm ready to actually "do it for real," at which point I will add the downloaded versions of your .css and .js file to my asp.net project's Contents and Scripts folders, respectively. And thanks for the plugin - it looks 42X better than anything else of its ilk that I've seen. – B. Clay Shannon-B. Crow Raven Apr 29 '13 at 21:58
Thanks for the kudos! Let me know if you have further problems, questions or suggestions, and please tell your colleagues about your success with the library in your favorite blogs, forums and social networks! – Andrew M. Andrews III Apr 29 '13 at 22:19

Why is my Anytime DateTimePicker jQuery plugin remaining a common textbox?

UPDATE

1 Answers1