// First notation
$(function() {
// Code here
});
// Second notation
$(document).ready(function() {
// Code here
});
These 2 code blocks are equivalent, my first advice is just pick one, the one you're more comfortable with, and stick with it.
Second advice, regarding the jQuery UI's datepicker: instead of relying on controls ids, which forces you to introduce server tags in you JS code, just choose a CSS class you'll use to tag the controls you want to apply jQuery UI datepicker to.
This way, you will keep your JS code DRY, and you can include the initialization code in the master page and not modify it.
Imagine you would choose the js-date-picker class as you tagging class, here's the JS you'll have to write. Note I prefer the short notation, but once again, it's up to you:
$(function() {
$(".js-date-picker").datepicker({
// Options go here
});
});
You can find the list of options here. I've always found good to go have a look at the options, so you're aware of the defaults, and you don't get surprised with some behavior that you might not have wanted.
EDIT: OK, after a second look, it's normal you don't see anything. I guess you also have a JS error when you run it. The screenshot shows you have jquery.datepick.js, which is different than jQuery UI's datepicker. I think I found the homepage of this plugin here.
As you can see, it shows the plugin can be invoked by calling .datepick() and not .datepicker().
Maybe you could try that.