> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/jquery-datepicker-select-multiple-date-ranges-in-one-calender-button-reset-ok.md).

# Jquery Datepicker select multiple date ranges in one calender, button Reset (ok)

https\://stackoverflow\.com/questions/43464228/jquery-datepicker-select-multiple-date-ranges-in-one-calender

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="mdp-demo"></div>
```

Part 2 <http://xecon.blue-dragon.biz/rent?appt=N&appt=N>

```
jQuery(document).ready(function($) {
    setTimeout(function() {
      $('input[name="wpf_rental-date"]').css("color","#000");
      $('input[name="wpf_rental-date"]').multiDatesPicker({
        showButtonPanel: true,
        closeText: 'Reset',
        onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close')){
          document.getElementById(this.id).value = '';
        }}
      });
    },3500);
  });
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FIhKKEH8FRuHiuhZhQkpy%2FScreenshot_1.png?alt=media\&token=c31aeaec-cac1-4518-8280-c90440995c9e)
