JQGrid date format Issue: Want to convert 30-JUN-2020 to 06/30/2020

Question

I wanted to format the below source date to target format in JQGrid, I tried several formats but not able to do so. Please help. I am getting "01/30/2020"

Source Format : 30-JUN-2020 Target Format : 06/30/2020

Code:

{
  label: '<font color="red" size="3">*</font><font size="2">End Date</font>',
  name: 'EndDate',
  key: false,
  index: 'EndDateHidden',
  editable: true,
  editrules: {
    required: true
  },
  formatter: 'date',
  sorttype: 'date',
  formatoptions: {
    srcformat: 'D-m-Y',
    newformat: 'm/d/Y'
  },
  searchoptions: {
    //sopt: ['eq'],
    placeholder: 'End Date',
    title: 'End Date'
  }
}, {
  name: 'EndDateHidden',
  hidden: true,
  formatter: 'date',
  formatoptions: {
    srcformat: 'm/d/Y',
    newformat: 'm/d/Y'
  }
}

and at last I have added

onInitGrid: function() {
  for (var i = 0, len = this.p.data.length; i < len; i++) {
    var row = this.p.data[i];
    row['conEndDateHidden'] = $.jgrid.parseDate.call(this, 'D-m-Y', row.EndDate, 'm/d/Y');
    console.log(" row['EndDateHidden'] :" + row['EndDateHidden'] + "EndDate :" + row['EndDate']);
  }
}

Answer 1

$(document).ready(function(){
GetDateFormated("30-JUN-2020");
})

function GetDateFormated(GivenDate) {
    var GivenMonth = GivenDate.replace(/[0-9]/g, '');
    var UpdatedDate;
    GivenMonth = GivenMonth.replace(/-/g, "");
    var Month = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC'];

    for(var i=0;i<12;i++)
    {
        if(Month[i]==GivenMonth)
        {
            if (i.toString().length == 2) {
                UpdatedDate = GivenDate.replace(GivenMonth, (i+1));
            }
            else {
                UpdatedDate = GivenDate.replace(GivenMonth, '0' + parseInt(i + 1).toString());                    
            }
                UpdatedDate = UpdatedDate.replace(/-/g, "/");
                console.log(UpdatedDate)
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Try to use

formatoptions: {
    srcformat: 'd-M-Y', // !!! instead of 'D-m-Y'
    newformat: 'm/d/Y'
}