1

By default http://amsul.ca/pickadate.js/index.htm render the widget when the user click on the input.

I created an icon and I want, when the user click on it, to show the widget. I tried with:

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

But the calendar does not show.

There is a way?

4

4 回答 4

4

我不认为触发点击（公认的解决方案）是解决这个问题的正确方法。使用 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();
});
于 2014-05-29T19:00:43.010 回答
1

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

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

    if(picker.get('open')) {
        picker.close();
    } else {
        picker.open();
    }
}
于 2013-09-09T13:17:39.507 回答
0

这对我有用：

<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>
于 2016-04-08T21:01:35.137 回答
-1

我真的不知道这个库。

您应该尝试将 calandar init 保留在处理程序之外，然后在您的输入中触发点击：

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

$(document).ready(function() {
    $("#my-icon").click(function(){
        $( '.input.dateFormat' ).trigger("click")
    });
});
于 2013-09-09T13:10:28.057 回答