JQuery UI datepicker: Làm một liên kết kích hoạt datepicker

Question

Tôi đang sử dụng giao diện người dùng datepicker JQuery: http://jqueryui.com/demos/datepicker/

thực hiện ở đây:

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

Tôi muốn sử dụng một liên kết chính là nguyên nhân nhưng tôi không thể làm cho nó hoạt động.

Đây là mã của tôi:

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

Bất kỳ ý tưởng?

Answer 1

này có thể giúp người khác.

Tôi đã kết thúc để nó hoạt động với giao diện người dùng JQuery.

Mã dưới đây:

$(".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 
     }); 

và tôi đã thay đổi id datepicker đến lớp ngày-pick

Answer 2

Từ jqueryui, nó có vẻ như bạn nên thêm showOn và có thể (không biết nếu nó yêu cầu) 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 
}); 

Answer 3

Thử sử dụng:

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

Answer 4

Bạn có thể làm một cái gì đó giống như tôi đã làm trong this fiddle

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(); 
}); 

Answer 5

Tôi chỉ giải quyết điều này rất dễ dàng trong ứng dụng của tôi - nếu bạn có datepicker bạn cởi mở với một lĩnh vực văn bản, bạn có thể sử dụng giải pháp này quá. Tôi đã thêm liên kết $('#date_field').focus() vào biểu tượng. Nhấp vào biểu tượng, trường văn bản sẽ được lấy nét và kích hoạt trình mở khóa ngày để mở. Thì đấy.

Answer 6

Với inline datepicker dễ dàng hơn để thực hiện việc này. Kiểm tra số JSFiddle của tôi.

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(); 
    } 
}); 

Answer 7

Dựa trên câu trả lời @camilokawerin, tôi đã làm điều này và tôi thấy nó easieast và giải pháp sạch:

HTML:

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

JS:

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