0

下手な英語でごめんなさい

リンクの下をクリックすると (サンプル: 2010 年 4 月 28 日)、その下でjquery.datepickerが開かれることが必要です。

<a></a>代わりに使用するには<input type="text" />

4

2 に答える 2

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);
});
于 2010-10-10T13:24:38.963 に答える
1

MVC アプリでは、コードは次のようになります。

XML:

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

これは次のようにレンダリングされます (これは、単純な古い .html として表示されるものです):

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

jQuery (以下に示す場所に jquery ライブラリと jquery ui ライブラリがあると仮定します):

<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>

上記のコードには、たとえば、過去 130 年間 (生年月日) を表示したり、月と年を変更できるようにするボタン/ドロップダウン リストを表示したりするなど、多くのアクセサリ設定があります。

これらの設定は、 jQuery Date Picker のドキュメントに記載されています。

于 2010-10-10T13:46:26.773 に答える