Question

默认情况下http://amsul.ca/pickadate.js/index.htm在用户点击输入时呈现小部件。

我创建了一个图标，当用户点击它时，我想要显示小部件。我尝试过：

$('#my-icon').on('click', function(){
   $("input.dateFormat").pickadate();
   $("input.dateFormat").click(); // Tried also with trigger
});

但是日历没有显示。

有办法吗？

Answer 1

我不认为触发点击（接受的解决方案）是解决此问题的正确方法。使用pickadate.js的第3版API，此处列出了打开/关闭选项：http://amsul.ca/pickadate.js/api.htm#method-open-close

代码将类似于：

var $input = $('.datepicker').pickadate();
var picker = $input.data('pickadate');
$('.calendarIcon').click( function( e ) {
    // stop the click from bubbling
    e.stopPropagation();
    // prevent the default click action
    e.preventDefault();
    // open the date picker
    picker.open();
});

Answer 2

我也不太了解这个库，但是快速浏览一下他们的“api”页面让我觉得你可能正在寻找这样的东西：

var picker = $("input.dateFormat").pickadate();
$("#my-icon").on('click', function() {

    if(picker.get('open')) {
        picker.close();
    } else {
        picker.open();
    }
}

Answer 3

这对我有用：

<html><head>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
      <script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
      <script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
      <script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
      <link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.css">
      <link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.date.css">
      <link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.time.css">

<script type="text/javascript">
$(window).load(function(){
  $('#inputDatetime').pickadate({
    //format: 'dd. mmmm yyyy',
    format: 'dd-mm-yyyy',
    formatSubmit: 'dd-mm-yyyy',
  });
});

$(document).ready(function() {
    $("#my-icon").click(function(){
        $( '#inputDatetime' ).pickadate("open"),
        event.stopPropagation(),
        event.preventDefault()
    });
});

</script></head>

<body>

    <input
      id="inputDatetime"
      name=""
      class=""
      type="text"
      placeholder="Try me&hellip;">
    <img src='https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png' id="my-icon">
</body>


</html>

Answer 4

我真的不知道这个lib。

您应该尝试将日历初始化保留在处理程序之外，然后在输入中触发单击：

$("input.dateFormat").pickadate();

$(document).ready(function() {
    $("#my-icon").click(function(){
        $( '.input.dateFormat' ).trigger("click")
    });
});

Pickadate.js：如何通过另一个元素渲染小部件

4 个答案: