Multiple date picker javascript

Question

I want to create an input form to allow a user to add the monthly recurring item in my application. The user can pick multiple dates from the month. After I googling I found AlloyUi datepicker using multiple type.

My questions are :

1. How to multiple select without press control? Currently, if click without control on another day will remove all other days.
2. How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month".
3. Any other library that fit in my case?

YUI().use(
  'aui-datepicker',
  function(Y) {
    new Y.DatePicker({
      trigger: 'textarea',
      mask: '%m/%d/%y',
      calendar: {
        selectionMode: 'multiple'
      },
      popover: {
        zIndex: 1
      },
      panes: 1
    });
  });

<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<textarea class="form-control" type="text" placeholder="mm/dd/yy">09/07/18 — 09/08/18 — 09/19/18</textarea>

Answer 1

This looks promising for your purpose. see the demo link below:

var today = new Date();
var y = today.getFullYear();
$('#mdp-demo').multiDatesPicker({
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
});

it serves your requirements:

• How to multiple select without press control? Currently, if click without control on another day will remove all other days.
• How to change input box to the only date after picked, so example return will be "Every 2nd, 10th, 28th every month". // you will have to work on it. see doc link below:

demo link: http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-full-year