页面的head部分，需引入一个CSS样式文件、jQuery库和两个JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js" language="javascript"></script>
<script type="text/javascript" src="js/share.js"></script>

页面的body部分，input标签用来存储选择的日期范围，div容器则用来装载弹窗的日历选项，代码如下：

<input type="text" class="ui-datepicker-time" readonly value="" />
<div class="ui-datepicker-css">	
    <div class="ui-datepicker-quick">
        <p>快捷日期<a class="ui-close-date">X</a></p>
        <div>
            <input class="ui-date-quick-button" type="button" value="今天" alt="0"  name=""/>
            <input class="ui-date-quick-button" type="button" value="昨天" alt="-1" name=""/>
            <input class="ui-date-quick-button" type="button" value="7天内" alt="-6" name=""/>
            <input class="ui-date-quick-button" type="button" value="14天内" alt="-13" name=""/>
            <input class="ui-date-quick-button" type="button" value="30天内" alt="-29" name=""/>
            <input class="ui-date-quick-button" type="button" value="60天内" alt="-59" name=""/>
        </div>
    </div>
    <div class="ui-datepicker-choose">
        <p>自选日期</p>
        <div class="ui-datepicker-date">
            <input name="startDate" id="startDate" class="startDate" readonly value="2014/12/20" type="text">
           —
            <input name="endDate" id="endDate" class="endDate" readonly  value="2014/12/20" type="text" disabled onchange="datePickers()">
        </div>
    </div>
</div>