jQuery日期范围选择器

   <h2>准备</h2>    <p>使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持。</p>    <pre>  <code class="language-javascript"><link rel="stylesheet" href="css/daterangepicker.css" />  <script src="js/moment.min.js"></script>  <script src="js/jquery.daterangepicker.js"></script></code></pre>    <h2>HTML结构</h2>    <p>在需要放置日期选择器的地方添加以下html结构，就是一个输入框。</p>    <pre>  <code class="language-javascript"><input type="text" id="datepicker" value=""></code></pre>    <h2>调用插件</h2>    <p>调用jQuery Date Range Picker插件非常简单，和其他常见的jQuery插件一样：</p>    <pre>  <code class="language-javascript">$('#datepicker').dateRangePicker(option);    </code></pre>    <h2>配置参数</h2>    <p>该日期选择器的默认配置参数如下：</p>    <pre>  <code class="language-javascript">{      format: 'YYYY-MM-DD',      separator: ' to ',      language: 'auto',      startOfWeek: 'sunday',// or monday      getValue: function()      {          return this.value;      },      setValue: function(s)      {          this.value = s;      },      startDate: false,      endDate: false,      minDays: 0,      maxDays: 0,      showShortcuts: true,      time: {          enabled: false      },      shortcuts:      {          //'prev-days': [1,3,5,7],          'next-days': [3,5,7],          //'prev' : ['week','month','year'],          'next' : ['week','month','year']      },      customShortcuts : [],      inline:false,      container: 'body',      alwaysOpen:false,      singleDate:false,      batchMode:false,      beforeShowDay: [function],      dayDivAttrs: [],      dayTdAttrs: [],      applyBtnClass: ''  }  </code></pre>    <p>format (String)：Moment的日期格式。 <a href="/misc/goto?guid=4959749629769785860" rel="nofollow,noindex">点击这里</a> 查看Moment文档。</p>    <p>separator (String)：日期字符串之间的分隔符。</p>    <p>language (String)：预定义的语言是"en"和"cn"。你可以使用这个参数自定义语言。也可以设置为"auto"来让浏览器自己检测语言。</p>    <p>startOfWeek (String)："sunday" 或 "monday"。</p>    <p>getValue (Function)：当从DOM元素中获取日期范围时会调用该函数，函数的上下文被设置为datepicker DOM。</p>    <p>setValue (Function)：当向DOM元素中写入日期范围时调用该函数。</p>    <p>startDate (String or false)：定义用户允许的最早日期，格式和format相同。</p>    <p>endDate (String or false)：定义用户允许的最后日期，格式和format相同。</p>    <p>minDays (Number) ：该参数定义日期范围的最小天数，如果设置为0，表示不限制最小天数。</p>    <p>maxDays (Number)：该参数定义日期范围的最大天数，如果设置为0，表示不限制最大天数。</p>    <p>showShortcuts (Boolean) ：先生或隐藏shortcuts区域。</p>    <p>time (Object)：如果允许该参数就会添加时间的范围选择。</p>    <p>shortcuts (Object)：定义快捷键按钮。</p>    <p>customShortcuts (Array)：定义自定义快捷键按钮。</p>    <p>inline (Boolean)：使用inline模式渲染该日期选择器，而不是overlay模式。如果设置为true，则要一起设置container参数。</p>    <p>container (String, css selector || DOM Object) ：要进行渲染的日期选择器DOM元素。</p>    <p>alwaysOpen (Boolean)：如果使用inline模式，你可能希望在页面加载时就渲染日期选择器。该参数设置为true时会隐藏"close"按钮。</p>    <p>singleDate (Boolean)：设置为true可以选择单个的日期。</p>    <p>batchMode (false / 'week' / 'month')：自动批处理模式。</p>    <h2>事件</h2>    <p>当该日期选择器在DOM中选择某个日期范围时会触发三个事件。</p>    <pre>  <code class="language-javascript">$('#datepicker')  .dateRangePicker()  .bind('datepicker-change',function(event,obj)  {      console.log(obj);      // obj will be something like this:      // {      //      date1: (Date object of the earlier date),      //      date2: (Date object of the later date),      //      value: "2013-06-05 to 2013-06-07"      // }  })  .bind('datepicker-apply',function(event,obj)  {      console.log(obj);  })  .bind('datepicker-close',function()  {      console.log('close');  });  </code></pre>    <h2>API</h2>    <p>在你调用$(dom).dateRangePicker()之后：</p>    <pre>  <code class="language-javascript">$(dom).data('dateRangePicker')      .setDateRange('2013-11-20','2013-11-25');  //set date range, two date strings should follow the `format` in config object      .clear();   // clear date range      .close();   // close date range picker overlay      .open();    // open date range picker overlay      .destroy(); // destroy all date range picker related things                  </code></pre>    <p> </p>    <p>来自：http://www.helloweba.com/view-blog-422.html</p>    <p> </p>