JqueryJqueryUi

Datepicker ui with next previous and today date custom button

Datepicker ui with next previous and today date custom button

Views

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.

datepicker-with-custom-buttons

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

9 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL