web-dev-qa-db-ja.com

JQuery UI Datepicker：リンクトリガーdatepickerの作成

JQueryのUIdatepickerを使用しています： http://jqueryui.com/demos/datepicker/

ここに実装：

http://www.clients.eirestudio.net/old/

リンクをトリガーとして使用したいのですが、機能しません。

これが私のコードです：

// JQuery UI
$("#datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy'
});

<p class="clearfix hidden">
    <input id="" class="input float datepicker" type="input" name="" value="" />
    <a class="calendar ui-icon ui-icon-calendar">Date</a>

    <span class="mid-info">To</span>
    <input id="" class="input datepicker" type="input" name="" value="" />
    <a class="calendar" href="#">Date</a>
</p>

何か案は？

jquery-uihyperlinkdatepicker
15
Keith Donegan

これは他の誰かを助けるかもしれません。

結局、JQueryUIで動作するようになりました。

以下のコード：

$(".date-pick").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '0m 0d',
      minDate: new Date(2000, 1 - 1, 1),
      dateFormat: 'dd-mm-yy',
      showOn: 'button', 
      buttonImage: 'http://www.example.com/elements/images/calendar.png', 
      buttonImageOnly: true
      });

そして、datepickeridをdate-pickクラスに変更しました

6
Keith Donegan

あなたは私がしたように何かをすることができます このフィドル

HTML：

<a href="#" id="toggleDP">Toggle</a>

JS：

var $dp = $("<input type='text' />").hide().datepicker({
    onSelect: function(dateText, inst) {
       $("body").append("<div>Selected "+dateText+"</div>");
    }
}).appendTo('body');

$("#toggleDP").button().click(function(e) {
    if ($dp.datepicker('widget').is(':hidden')) {
        $dp.show().datepicker('show').hide();
        $dp.datepicker("widget").position({
            my: "left top",
            at: "right top",
            of: this
        });
    } else {
        $dp.hide();
    }

    //e.preventDefault();
});
27
gnarf

私は自分のアプリでこれを非常に簡単に解決しました-テキストフィールドで日付ピッカーを開いている場合は、この解決策も使用できます。アイコンに$('#date_field').focus()リンクを追加しました。アイコンをクリックすると、テキストフィールドにフォーカスが移り、日付ピッカーが開きます。出来上がり。

18
Eric

使用してみてください：

    <a href="javascript:void(0);" onclick="$.datepicker._showDatepicker($('#inputID')[0]);">Text here</a>
    <input type="hidden" id="inputID"/>
    ...
    <script type="text/javascript">
      $(document).ready(
         function()
         {
             $('#inputID').datepicker();
         }
      );
    </script>
6
Zsolti

@camilokawerinの回答に基づいて、私はこれを実行しましたが、これが最も簡単でクリーンなソリューションであることがわかりました。

HTML：

<a href="#" id="selec">Click</a> <div id="datepicker" style="display:none"></div>

JS：

$("#datepicker").datepicker();
$('#selec').click(function(){
    $('#datepicker').toggle();
});
4
Pere

jqueryui から、showOnを追加する必要があるようです（必要かどうかはわかりません）buttonImage：

$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: '0m 0d',
    minDate: new Date(2000, 1 - 1, 1),
    dateFormat: 'dd-mm-yy',
    showOn: 'button', 
    buttonImage: 'images/calendar.gif', // adapt this to your image
    buttonImageOnly: true
});
0
Tom Bartel

inline datepicker を使用すると、これを行うのが非常に簡単になります。私の JSFiddle を確認してください。

HTML

<a href="#" class="datepicker">Pick a date</a>

JS

var dpToggler = $('a.datepicker').button(),
    dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);

dpToggler.on('click', function(e) {
  e.preventDefault();
  if (dp.is(':hidden')) {
    dp.show().position({
      my: 'left top',
      at: 'right top',
      of: this
    });
  } else {
    dp.hide();
  }
});
0
camilokawerin