开始日期

<label for="valueA">Start Date:</label>
<select name="valueA" id="valueA">
    <optgroup label="2003">
        <option value="01/03">Jan 03</option>
        <option value="02/03">Feb 03</option>

        <option value="03/03">Mar 03</option>
        <option value="03/03">Apr 03</option>
        <option value="03/03">May 03</option>
        <option value="06/03">Jun 03</option>
        <option value="07/03">Jul 03</option>
        <option value="08/03" selected="selected">Aug 03</option>

        <option value="09/03">Sep 03</option>
        <option value="10/03">Oct 03</option>
        <option value="11/03">Nov 03</option>
        <option value="12/03">Dec 03</option>
    </optgroup>
</select>

结束日期

<label for="valueB">End Date:</label>

引入selectToUISlider日期范围插件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>

<link rel="stylesheet" href="css/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />

$('select').selectToUISlider({
    labels: 12, //设置标签的显示个数  
    sliderOptions: {
        change: function(e, ui) { //定义change事件  

        }
    }
});