September 27, 2021

Jquery ui calendar

<div class="datepicker">
       <div class="datepicker-header">
           
       </div>
   </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; }
        .datepicker {
            width:475px; background: #fdfdfd; border-radius: 10px; box-shadow: 0px 19px 38px rgba(0,0,0,.2),0 15px 12px rgba(0,0,0,0.2);
            margin: 15px auto;
            overflow: hidden;
        }
        .datepicker .datepicker-header { height: 250px; background: url(https://www.tolmatol.com/uploads-images/jquery-ui-calendar/calendar.jpeg); background-size: cover;}
        .datepicker .ui-datepicker-inline { padding: 30px; }
        .datepicker .ui-datepicker-header { text-align: center; font-size: 1.4em; padding-bottom: 0.5em; letter-spacing: 0.1em; color: #333;}
        .datepicker .ui-datepicker-header .ui-datepicker-prev, .datepicker .ui-datepicker-header .ui-datepicker-next {
            float: left;cursor: pointer; font-size: 1em; padding: 12px 5px; margin-top: -8px; color: #ddd; transition: .6s;
        } 
        .datepicker .ui-datepicker-header .ui-datepicker-next {float: right;  }
        .datepicker .ui-datepicker-calendar { width: 100%; text-align: center;}
        .datepicker .ui-datepicker-calendar thead { color: #ddd; font-weight: 400;}
        .datepicker .ui-datepicker-calendar tr th, .datepicker .ui-datepicker-calendar tr td { padding: 0.2em;}
        .datepicker .ui-datepicker-calendar a { color: #333; text-decoration: none; display: block; margin: 0 auto; width: 30px; height: 30px;line-height: 30px; border-radius: 4px; border: solid 1px transparent; cursor: pointer;}
        .datepicker .ui-datepicker-calendar a:hover { background: #da89a2; color: #fff; transition: .7s; transform: scale(1);}
        .datepicker .ui-datepicker-calendar .ui-state-highlight { background: #9c27b0; color: #fff;}
        
        
    </style>

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".datepicker").datepicker({
                prevText: '<i class="fa fa-chevron-left"></i>', 
                nextText: '<i class="fa fa-chevron-right"></i>', 
            }) 
        });
    </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *