<template>
         
      <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle example_disable_while_logging" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <ul class="dropdown-menu">
                  <li>
                      <div class="input-group" style="display: inline-flex;">
                          <lightning-input id="dos_start" maxlength="10"  onkeyup={checkValue} value={dDate} type="text" class="date-picker form-control" placeholder="Begin"></lightning-input>
                          <span id="hoverOverAreal">
                          
                              <a onclick={hoverOverAreal} html-log_this ="false">
                                  <lightning-button-icon id="lnkimag1" style="margin-top: 8px;"  icon-name="standard:date_input"></lightning-button-icon>
                                  <lightning-output-field  style="width: 7em; margin-top: -15px;">(MMDDYYYY)</lightning-output-field>
                              </a>
                          </span>
  
                      </div>
                  </li>
                  <li>
                      <div class="input-group" style="display: inline-flex;">
  
                          <lightning-input id="dos_end" maxlength="10" value={eDate} onkeyup={checkValue} type="text" class="date-picker form-control" placeholder="End"></lightning-input>
                          
                              <span id="hoverOverArea2">
                              <a onclick={hoverOverArea2} html-log_this ="false">
                                <lightning-button-icon id="lnkimag2" style="margin-top: 8px;"  icon-name="standard:date_input"></lightning-button-icon>
                                  <lightning-output-field  style="width: 7em; margin-top: -15px;">(MMDDYYYY)</lightning-output-field>
                              </a>
                          </span>
                      
  
                      </div>
                  </li>
  
              </ul>
          </button>
      </div>
  
      </template>

import { LightningElement,  track } from 'lwc';


export default class CustomDatePicker extends LightningElement {
  @track edate= "";
    checkValue(evt) {
      var str = evt.target.value;
  var stl = str.length;
  var char = "";
  var c = "";
  console.log('str: ' + str + ' len: ' + stl);
    if ( stl > 9 ) evt.preventDefault();
    char = str;
    if ( stl == 2)
      char = str + "/";
    if ( stl == 5)
      char = str + "/";
      this.edate = char;
console.log('this is char valueee:'+ char);
      var char;
      if(event.target.dataset.id === 'text'){
        this.numberFieldValue = char;
    }else if(event.target.dataset.id === 'date'){
        this.checkBoxFieldValue = char;
    }
  
      var dateInput = eDate ? eDate.which : window.event.keyCode;
      if(dateInput == 8){
      dDate.char = dDate.char.substr(0, dDate.char.length);
      return;
      }
      var dateValue = dDate.char;
      var dateValueSplit = dateValue.split('/');
      for(var a = 0; a< dateValueSplit.length; a++){
      dateValueSplit[a] != dateValueSplit[a] + dateValueSplit[a];
      if(dateValueSplit[a] != +dateValueSplit[a]){
      dateValueSplit[a] = dateValueSplit[a].substr(0, dateValueSplit[a].length - 1); }
      
      }
      dateValue = dateValueSplit.join('/');
      if(dateValue.length == 2 || dateValue.length == 5) dateValue += '/';
      dDate.char = dateValue;
      }
    }