javascript html jquery momentjs jquerydatetimepicker

Change returned value from jquery datetimepicker

I am using jQuery datetimepicker where I am formatting date like DD/MM/YYYY, everything is okay with displayed date, but when I sent it on post I want date to be sent as 2022-07-22, when I use HTML5 datepicker the date is sent 2022-07-22. How I can do that? Do I need to do it on controller side or I can do it using datetimepicker and moment on client side.

$(document).ready(function() {
  $.datetimepicker.setDateFormatter('moment');
  $(".datepicker").datetimepicker({
     timepicker: false,          
     format: 'DD/MM/YYYY',
  });
})

Solution

const dateFormat = 'DD/MM/YYYY';
$(document).ready(function () {
    $.datetimepicker.setDateFormatter('moment');
    $('.datepicker').datetimepicker({
        timepicker: false,
        format: dateFormat,
    });
});

$('.getByVal').on('click', function () {
    //get value by using textbox value
    let value = $('.datepicker').val();
    console.log('By jquery val: ' + value);
});

$('.getByDateTimePicker').on('click', function () {
    //get Date object by using datetimepicker and convert into required format with the help of moment
    let value = moment($('.datepicker').datetimepicker('getValue')).format(dateFormat);
    console.log('By datetimepicker getValue: ' + value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" />

<input type="text" class="datepicker" />
<button class="getByVal">Get Value By Val</button>
<button class="getByDateTimePicker">Get Value By Datetimepicker</button>