i am using lightening design system on visualforce page. i have field which showing calender when click on calender icon only but when click in input text field calender doesnot show as they have bydefault functionality  i want to call calender event whensomeone click on  inputtext field how can do this  and i also want that this calender should come above that modal. can somebody help me.


 <fieldset class="slds-form--compound">
                            <div class="slds-form-element__group">
                                <div class="slds-form-element__row">
                                    <div class="slds-form-element slds-size--1-of-2">
                                        <label class="slds-form-element__label" for="input-01">Payment Status</label>
                                        <apex:inputfield id="text-input-07" styleclass="slds-input" value="{!expense.Payment_Status__c}"/>
                                    </div>
                                    <div class="slds-form-element slds-size--1-of-2">
                                      <label class="slds-form-element__label" for="input-02">Date</label>
                                        <div class="slds-form-element"> 
                                          <div class="slds-form-element__control" style="width:200px;">
                                            <div class="slds-input-has-icon slds-input-has-icon--right" id="Icon">
                                              <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                                                <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#event')}"></use>
                                              </svg> 
                                              <input id="date" class="slds-input" type="text" placeholder="Pick a Date" label="Date Picker Label"/>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

<script>
        var j$ = jQuery.noConflict();
        //Assigning SLDS Static Resource Path To A Variable To Use It With ALJS Initialization
        var assetsLoc = '{!URLFOR($Resource.SLDS)}';
          
        //ALJS Initialization   
               
        j$.aljsInit({
          assetsLocation: assetsLoc, //SLDS Static Resource Path
          scoped: true
        });
           
        j$(document).ready(function() {
         
        //Initializing Datepicker with options To The SLDS Input on document ready.
         
         j$('#date').datepicker({
            initDate: moment(), //Today Date
            format: 'YYYY/MM/DD', //Date Format Of Datepicker Input Field
            onChange: function(datepicker) {
            j$('#SelectedDate').html('Selected Date: <strong>'+moment(datepicker.selectedFullDate._d).format('YYYY/MM/DD')+'</strong>');
           }
          });
        });
    </script>