Comment activer bootstrap DatePicker par le biais de l'icône

Comment puis-je activer mon bootstrap DatePicker en cliquant sur une icône?

Mon code HTML est:

<input type="text" class="datepicker">  
    <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>

et le script est:

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
</script>

Je veux activer mon datepicker en cliquant sur l'icône, mais il ne fonctionne pas.

Comment puis-je y parvenir?

  • Qui datepicker? Il y a beaucoup de fourches de bootstrap-datepicker; êtes-vous à l'aide de la eternicode version, le eyecon version, ou quelque chose d'autre?
InformationsquelleAutor user2142786 | 2014-01-08
  1. 6
    <input type="text" id="my-datepicker" class="datepicker">  
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>

<script type="text/javascript">"
   $('#cal2').click(function(){
       $(document).ready(function(){
           $("#my-datepicker").datepicker().focus();
       });
   });
</script>
    • travaillé comme un charme. Merci pour l'aide. +1
    InformationsquelleAutor makallio85
  2. 3

    De docs, Enveloppez votre datepicker textbox avec div comme

    <div class="input-append date" id="dp3">
    <input type="text" id="datepicker" /> 
       <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>

    Ensuite attaché le datepicker de l'événement avec div's id comme

    $("#dp3").datepicker();

    JSFiddle

    • datepicker ne disparaissent pas. Il reste ouvert.
    • pour être fermé, il est fait dans le flou événement à ne pas cliquez sur l'événement
    InformationsquelleAutor Praveen
  3. 1

    Selon la documentation:

    .datepicker('show') Afficher le datepicker.

    Suffit d'utiliser l'événement click pour montrer votre datepicker.

    • Il a besoin d'être travaillé.
    InformationsquelleAutor Loenix
  4. 1

    Vous pouvez le faire comme ça, mais il y a un petit changement dans votre code html.

    <input type="text" class="datepicker" id="tb_date">  
<label class="add-on" for="tb_date">
  <i class="icon-calendar" id="cal2"></i>
</label>
    InformationsquelleAutor Akbar Badhusha
  5. 0
    <script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>
    • Vous avez tort, OP parle de bootstrap datepicker alors que vous êtes la réponse est pour jQuery datepicker.
    InformationsquelleAutor Anup