2013-09-09 3 views
1

По умолчанию http://amsul.ca/pickadate.js/index.htm визуализируйте виджет, когда пользователь нажимает на вход.Pickadate.js: как визуализировать виджет через другой элемент

Я создал значок, и я хочу, когда пользователь нажмет на него, чтобы показать виджет. Я пробовал с:

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

Но календарь не отображается.

Есть способ?

ответ

-1

Я не знаю этого.

Вы должны попытаться сохранить свой calandar Init вне обработчика, а затем вызвать щелчок в вашем входе:

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

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

Я не знаю эту библиотеку либо, но быстрый взгляд на их «апи "страница заставляет меня думать, что вы, вероятно, ищете что-то вроде этого:

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

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

Вы также может потребоваться отменить всплеск события, чтобы предотвратить закрытие сборщика. – mmmmmm

4

Я не думаю, что запуская щелчок (принятое решение) является правильным способом идти об этом. Использование версии 3 API из pickadate.js, открывающиеся/закрывающиеся варианты описаны здесь: http://amsul.ca/pickadate.js/api.htm#method-open-close

Код затем будет что-то вроде:

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>