JQuery UI Datepicker: Making a clickble link

Question

Hello, sorry for the bad English

It is necessary for me, that at click under the link (sample: 28 April 2010), under it the jquery.datapicker opened

To use <a></a> instead of <input type="text" />

Answer 1

<a class="date-picker" href="#">10/10/2010</a>

$(function() {
 function onSelect(date) {
    alert(date);
 } 

 function openDatePicker() {
    element = $(this)
    offset = [element.offset().left, element.offset().top + element.height()]
    element.datepicker("dialog", $(this).text(), onSelect, {}, offset)
  }

  $(".date-picker").click(openDatePicker);
}); 

Answer 2

In an MVC app, your code could be:

XML:

    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.DOB, new { @class = "date-picker" })%>
        <%= Html.ValidationMessageFor(model => model.DOB, "*") %>
    </div>

Which would render as (this is what it would look like as a plain old .html):

<div class="editor-field">
    <input class="date-picker hasDatepicker" id="DOB" name="DOB" type="text" value="">
</div>

jQuery (presuming you have the jquery library and jquery ui libraries in the locations shown below):

<script id="script3" src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script id="script4" src="/jQueryUI/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script id="script2" src="/jQueryUI/ui/jquery.ui.core.min.js" type="text/javascript"></script>
<script id="script1" src="/jQueryUI/ui/jquery.ui.datepicker.min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $('.date-picker').live('click', function () {
                $(this).datepicker({ showOn: 'focus', changeMonth: true, changeYear: true, yearRange: "-130:+0" }).focus();
            });
        });
</script>

In the above code, you have a number of accessory settings, eg, to show the last 130 years (for date of birth) and buttons/drop down lists to allow changing month and year.

You can find these settings documented at: jQuery Date Picker Documentation