Home > Software engineering >  Custom date format “fengyuanchen/datepicker”
Custom date format “fengyuanchen/datepicker”

Time:09-18

I am using “fengyuanchen/datepicker” date picker plugin, i need date format in 17 May 2021 but when i am changing date format it gives me undefined. Need help, Thanks in advance.

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    format: 'dd MM yyyy',

});

HTML

<input type='text' value="05 May 2021" data-toggle="datepicker" />

CodePudding user response:

Whenever user select any date then you can customize that in your required format and set that value in your datepicker using .val().

Demo Code :

$(document).ready(function() {
  $('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function(e) {
      e.preventDefault(); //prvent any default action..
      var pickedDate = e.date; //get date
      var date = e.date.getDate()
      var month = $(this).datepicker('getMonthName')
      var year = e.date.getFullYear()
      var new_date = date   " "   month   " "   year
      //set date 
      // $(this).val(`${date} ${month} ${year}`)
      $(this).val(new_date)

    }

  });
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet" />
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

<input type='text' value="05 May 2021" data-toggle="datepicker" />

  • Related