Datepicker problem

Hi I need some help regarding in my datepicker. i set to autofocus so that the pointer will pointed to the date field,but i encountered problem because whenever i am going to click the date field it will not show the datepicker calendar,i need to click first the school field then click again the date field in order to show the date picker.can you help me please on this.


 <form  method="post" id="myid">
            <div>
                <label>Date</label>
                <input type="text" id="date" value="" name="date" autofocus="autofocus"  required="required"/>
            </div>

            <div>
                <label>School Name</label>
                <input type="text" id="school" value="" name="school" autofocus="autofocus"   required="required"/>
            </div>

</form>