Datepicker ui with next previous and today date custom button

Hello, welcome to therichpost.com. In this post, I will tell you, Datepicker ui with next previous and today date custom button I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code. Today I am going to add next previous and today buttons to datepicker.

Here is the working code for, Datepicker ui with next previous and today date custom button:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 
<script>
$(document).ready(function(){
$('#datepicker').val(moment().format('MM/DD/YYYY'));
    $('#datepicker').datepicker();

   $('.next-day').on('click', function () {
       var date = $('#datepicker').datepicker('getDate');
       date.setDate(date.getDate() +1)
       $('#datepicker').datepicker('setDate', date);
   });

   $('.prev-day').on('click', function () {
       var date = $('#datepicker').datepicker('getDate');
       date.setDate(date.getDate() -1)
       $('#datepicker').datepicker('setDate', date);
   });

   $('.today-date').on('click', function () {
       var date = moment().format('MM/DD/YYYY');
       $('#datepicker').datepicker('setDate', date);
   });
   });
   </script>
<button class="prev-day btn btn-outline-secondary"><i class="fa fa-angle-left" aria-hidden='true'></i></button>
<button class='today-date btn btn-outline-secondary'>Today</button>
<input type='text' id='datepicker'  name='datepicker'>
<button class='next-day btn btn-outline-secondary' ><i class='fa fa-angle-right' aria-hidden='true'></i></button>

 There are so many jquery code, tricks and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com