Using jQuery Date picker with a custom trigger button

后端 未结 6 1605
伪装坚强ぢ
伪装坚强ぢ 2021-02-20 08:37

How do I make the jQuery Datepicker open up by a user defined button?

相关标签:
6条回答
  • 2021-02-20 09:09

    The samples page as an example of how to make the datpicker appear by clicking an icon:

    here

    0 讨论(0)
  • 2021-02-20 09:13

    There's built-in support for this, having an icon or button to right right of the textbox, like this:

    $("#datepicker").datepicker({
      showOn: 'button',
      buttonImage: 'images/calendar.gif',
      buttonImageOnly: true
    });
    

    If you want to show it from another button, or really any event, call the show method, like this:

    $("#myButton").click(function() {
      $("#datepicker").datepicker("show");
    });
    

    You can try it here

    0 讨论(0)
  • 2021-02-20 09:13

    The question is not clear if you want an additional trigger or an additional trigger. If you want to have an additional trigger. The accepted answer did not work for me perhaps its an outdated version. The below code worked for me as a general trigger

        $('#datepicker').jqxDateTimeInput('open');
    
    0 讨论(0)
  • 2021-02-20 09:22

    This is HTML for date picker icon

    onclick="show_date_picker('#datepicker_id');  on you icon element
    

    This is function for open & close datepicker on icon click

    function show_date_picker(source_datepicker){
        if($(source_datepicker).datepicker("widget").is(":visible")){
            $(source_datepicker).datepicker("hide");
        }else{ 
            $(source_datepicker).datepicker("show"); 
        }
    }
    
    0 讨论(0)
  • 2021-02-20 09:27

    $("#checkin").datepicker({
      dateFormat: 'dd/mm/yy',
      minDate: '0',
      changeMonth: true,
      numberOfMonths: 1
     });
    .datedivmng{
        float: left;position: relative;
    }
    .datedivmng .datepicker{
        position: relative;width: 87%!important;
        cursor: pointer;
    }
    .datedivmng:after {
        /* symbol for "opening" panels */
        font-family: 'FontAwesome';
        content: "\f073";
        color: #329ac4;
        font-size: 16px;
        text-shadow: none;
        position: absolute;
        vertical-align: middle;
        pointer-events: none;
        float: right;
        top: 2px;
        right: 7px;
    }
    <div class="datedivmng">
      <input type="text" id="checkin" name="checkin"  value="" /></div>

    0 讨论(0)
  • 2021-02-20 09:28

    I have solved using focus.

    $("#datepicker").datepicker();
    
    $("#myButton").click(function() {
     $("#datepicker").focus();
    });
    
    0 讨论(0)
提交回复
热议问题