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

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

```
<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](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)
