date manipulation

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input type="datetime-local" data-date="" id="date" data-date-format="DD MMMM YYYY HH:mm" value="2015-08-09 12:06">

CSS

input {
    position: relative;
    width: 200px; height:20px;
    color: white;
    background: white;
 } 

 input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
 }
  input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
   /*  display: none; */
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
   /*  background: red; */
}

JavaScript

//Device detect
var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },

  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};

//Date picker in mobile
if (isMobile.any()){
alert(1)
    $.setAttribute(moment("09/10/2019", "YYYY-MM-DD HH:mm").format( this.getAttribute("data-date-format"))
      )
 .trigger("change")
 //On Initial value empty
  if ( $('input').attr('data-date') == 'Invalid date' ) {
   $('input').removeAttr('data-date');
  }
}