You can use multiple approaches here. This (http://sri.bedathur.com/2013/10/18/jqueryui-date-picker-in-visualforce-part-2/) is one such tutorial which uses jQuery to do so.

Your VF page would look something like
 

<table width="100%" border="0">
                    <tr>  
                        <td width="20%" valign="top">
                            <apex:pageBlock title="Parameters" mode="edit" id="criteria">
                                 
                                <apex:actionFunction name="queryBuilder" action="{!buildQueryString}" rerender="queryString,errors">
                                    <apex:param name="name" value="" />
                                    <apex:param name="event_start_date_from" value="" />
                                    <apex:param name="event_start_date_to" value="" />
                                </apex:actionFunction>
  
                                <!-- fields for alternate date format (needed for SOQL queries) -->
                                <input type="hidden" name="event_start_date_from_alternate" id="event_start_date_from_alternate" />
                                <input type="hidden" name="event_start_date_to_alternate" id="event_start_date_to_alternate" />
                                 
 
                                <table cellpadding="2" cellspacing="2">
                                    <tr>
                                        <td style="font-weight:bold;width:100px;">
                                            Event Name
                                        </td>
                                        <td>
                                            <input type="text" id="name" placeholder="Part of event name" style="height:20px; width:200px;" />
                                        </td>
                                    </tr>
                                    <tr><td colspan="2">&nbsp;</td></tr>                                  
                                    <tr>
                                        <td colspan="2" style="font-weight:bold;text-align:center;">
                                            Event Date Range
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight:bold;">
                                            <label for="event_start_date_from">Start on/after</label>
                                        </td>
                                        <td>
                                            <input type="text" name="event_start_date_from" id="event_start_date_from" placeholder="On or after" style="height:20px; width:200px;" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-weight:bold;">
                                            <label for="event_start_date_to">Start on/before</label>
                                        </td>
                                        <td>
                                            <input type="text" name="event_start_date_to" id="event_start_date_to" placeholder="On or before" style="height:20px; width:200px;" />
                                        </td>
                                    </tr>
                                     
                                </table>

You can follow the complete controller and VF code on the provided link.

If my answer helps resolve your query, please mark it as the 'Best Answer' & upvote it to benefit others and improve the overall quality of Discussion Forums.

Gaurav Kheterpal
Certified Force.com Developer| Salesforce Mobile Evangelist| Developer Forums Moderator| Dreamforce Speaker