JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/amsul/pickadate.js/master/lib/picker.js"></script>
<script src="https://rawgit.com/amsul/pickadate.js/master/lib/picker.date.js"></script>
<script src="https://rawgit.com/amsul/pickadate.js/master/lib/picker.time.js"></script>
<script src="https://rawgit.com/moment/moment/develop/moment.js"></script>
<body>
<div class="form-group">
<label>Format : MM/YYYY </label>
<div>
<input type="text" id="pickadate" class="form-control" >
</div>
</div>

<div class="form-group">
<label>Format : DD/MM/YYYY </label>
<div>
<input type="text" id="pickadate2" class="form-control" >
</div>
</div>
</body>

CSS

.picker {
  width: 100%;
  text-align: left;
  position: absolute;
  top: 100%;
  margin-top: -1px;
  z-index: 990;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.picker__input {
  cursor: default;
}
.picker__holder {
  width: 100%;
  overflow-y: auto;
  position: absolute;
  display: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top-width: 0;
  border-bottom-width: 0;
  max-width: 290px;
  max-height: 0;
  -webkit-overflow-scrolling: touch;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.picker--opened .picker__holder {
  max-height: 480px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  display: block;
} 

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-control {
  -webkit-box-shadow: none;
  box-shadow: none;
}

JavaScript

var $input = $('#pickadate').pickadate({
	  onOpen: function() 
    {
   	var picker = $('#pickadate').pickadate('picker');
  	var dateinput = $('#pickadate').val();
    if(moment(dateinput, 'MM/YYYY', true).isValid())
		{
			console.log('mm/yyyy');
   		picker.set('select', dateinput, { format: 'mm/yyyy' });
		 } 
   	console.log(dateinput);	   		
 	  },
    onClose: function() 
    {
        $('#pickadate').focus();
    },
        editable: true,
        format: 'mm/yyyy',
        formatSubmit: 'mm/yyyy'

    });
    
var picker = $input.pickadate('picker');
$input.on('click', function(event) 
{
    if (picker.get('open')) {
        picker.close();
    } else {
        picker.open();
    }                        
    event.stopPropagation();
});


var $input2 = $('#pickadate2').pickadate({
	  onOpen: function() 
    {
   	var picker = $('#pickadate2').pickadate('picker');
  	var dateinput = $('#pickadate2').val();
    if(moment(dateinput, 'DD/MM/YYYY', true).isValid())
		{
			console.log('dd/mm/yyyy');
   		picker.set('select', dateinput, { format: 'dd/mm/yyyy' });
		 } 
   	console.log(dateinput);	   		
 	  },
    onClose: function() 
    {
        $('#pickadate2').focus();
    },
        editable: true,
        format: 'dd/mm/yyyy',
        formatSubmit: 'dd/mm/yyyy'

    });
    
var picker2 = $input2.pickadate('picker');
$input2.on('click', function(event) 
{
    if (picker2.get('open')) {
        picker2.close();
    } else {
        picker2.open();
    }                        
    event.stopPropagation();
});