1

カレンダーを取得するには、2 回クリックする必要があります。Keithwood プラグインを使用しています: http://keith-wood.name/calendars.html

私のコード:

    <div class="control-group date">
         <div class="day">
             <input name="startday_2" placeholder="DD" type="text" id="startday_2" maxlength="2" readonly="readonly" />
   </div>
   <div class="month">
       <input name="startmonth_2" placeholder="MM" type="text" id="startmonth_2" maxlength="2" readonly="readonly" />
   </div>
   <div class="year">
      <input name="startyear_2" placeholder="YYYY" type="text"                    id="startyear_2" maxlength="4" readonly="readonly" />
   </div>
   <input type="hidden" id="startDate_2" class="calPicker" />
   <div class="date-tool" id="greStartId_2">
    <a href="javascript:void(0)" id="startPopup_2"> <span id="img_2"><img                 onclick="javascript:setVal(2)" src="/OnlineAppointmentSystemBase-portlet/img/date-icon.jpg" alt="Popup" class="trigger calenderIcon calendars-trigger"></span>
    </a>
   </div>
   </div>
<script type="text/javascript">
function setVal(values) {
              var finalVal = '#startPopup_' + values;
              var imgN = 'img_' + values;
              document.getElementById(imgN).style.display = 'none';
              $(finalVal)
                           .calendarsPicker(
                                         {
                                                calendar : $.calendars.instance('Gregorian'),
                                                showOnFocus : false,
                                                showTrigger : '<img src="<c:url value="/img/date-icon.jpg"/>" alt="Popup" class="trigger calenderIcon">',
                                                onSelect : updateSelected
                                         });

              function updateSelected(dates) {
                     var selId = this.id;
                     var ret = selId.split("_");
                     var str2 = ret[1];
                     var a = '#startday_' + str2;
                     var b = '#startmonth_' + str2;
                     var c = '#startyear_' + str2;
                     var days = dates[0].day();
                     if (days < 10) {
                           days = '0' + days;
                     }
                     $(a).val(days);

                     var months = dates[0].month();
                     if (months < 10) {
                           months = '0' + months;
                     }
                     $(b).val(months);

                     $(c).val(dates[0].year());
                     $('#endDate_2').val(
                                  $('#endyear_2').val() + "/" + $('#endmonth_2').val() + "/"
                                                + $('#endday_2').val());

              }
              ;
       }
</script>

このコードは機能しますが、アイコンを 2 回クリックする必要があります。カレンダーを事前に初期化する方法や、ワンクリックで同じ作業を行う方法はありますか?

4

1 に答える 1

1

最初にshowTriggerオプションの文字列を確認してください。形式が正しくありません。

要素自体のクリックでカレンダーをアタッチしているため、ハンドラーがアタッチされているため、2 回目のクリックで機能します。

最初のクリックで動作させるには、メソッドを呼び出すことができますshow:

$(selector).datepick('show') jQuery オブジェクト 指定されたフィールドの日付ピッカーをポップアップします。

お気に入り：

$(finalVal).calendarsPicker('show');

コード：

$(function () {
    $('.trigger calenderIcon calendars-trigger').calendarsPicker();
});

function setVal(values) {
    var finalVal = '#startPopup_' + values;
    var imgN = 'img_' + values;
    document.getElementById(imgN).style.display = 'none';
    $(finalVal)
        .calendarsPicker({
        calendar: $.calendars.instance('Gregorian'),
        showOnFocus: false,
        showTrigger: '<img src="" alt="Popup" class="trigger calenderIcon">',
        onSelect: updateSelected
    });

    $(finalVal).calendarsPicker('show')

    function updateSelected(dates) {
        var selId = this.id;
        var ret = selId.split("_");
        var str2 = ret[1];
        var a = '#startday_' + str2;
        var b = '#startmonth_' + str2;
        var c = '#startyear_' + str2;
        var days = dates[0].day();
        if (days < 10) {
            days = '0' + days;
        }
        $(a).val(days);

        var months = dates[0].month();
        if (months < 10) {
            months = '0' + months;
        }
        $(b).val(months);

        $(c).val(dates[0].year());
        $('#endDate_2').val(
        $('#endyear_2').val() + "/" + $('#endmonth_2').val() + "/" + $('#endday_2').val());

    };
}

ドキュメント: http://keith-wood.name/datepickRef.html#

デモ: http://jsfiddle.net/IrvinDominin/UYE55/

于 2013-08-16T12:47:40.317 に答える