const setCalender = ($target) => { let $calender = $('.calender', $target); $($calender[0]).datepicker({ showOtherMonths: true, onClose: function(dateText, inst) { $($calender[1]).datepicker('option', 'minDate', dateText); $($calender[0]).val(dateText); } }); $($calender[1]).datepicker({ showOtherMonths: true, onClose: function(dateText, inst) { $($calender[0]).datepicker('option', 'maxDate', dateText); $($calender[1]).val(dateText); } }); }; setCalender($('#js-calender')); const inlineCalender = ($target) => { $('#js-inline-calender').datepicker({ onSelect: function(dateText, inst) { $target.val(dateText); } }); }; inlineCalender($('#js-output'));
<h1 class="h1">simple calender</h1> <div class="wrap"> <div class="inner"> <section class="section" id="js-calender"> <p>FROM:<br><input type="text" class="calender"></p> <p>TO:<br><input type="text" class="calender"></p> </section> <section class="section"> <div id="js-inline-calender"></div> <input type="text" class="calender" id="js-output"> </section> </div> </div> <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">
body { width: 100%; min-height: 100vh; background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 1.2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { padding-right: 1em; padding-left: 1em; min-width: 300px; } .section { max-width: 480px; padding: 1em; border: 6px double currentColor; // + .section { margin-top: 2rem; } } .calender { display: inline-block; height: 50px; width: 400px; padding-left: 1em; // + .calender { margin-top: 1rem; } } // ////// $primary-color: #ccc; $white: #fafafa; .ui-datepicker { width: 420px; text-align: center; background: $white; margin: 0 0 10px 0; border: 2px solid $primary-color; box-shadow: 0 0 120px rgba(black, .2); } .ui-datepicker a { color: $primary-color; } .ui-datepicker-calendar { width: 100%; } .ui-datepicker-group { margin: 0 0 10px 0; background: $primary-color; } .ui-datepicker-header { color: $primary-color; padding: 15px; text-transform: uppercase; letter-spacing: 3px; } .ui-datepicker-calendar thead th { color: $primary-color; padding: 10px; border-top: 2px solid rgba($primary-color,1); } .ui-datepicker-calendar th, .ui-datepicker-calendar td { font-size: 14px; color: $primary-color; text-align: center; border: 1px solid rgba($primary-color,.5); } .ui-datepicker-calendar td span { display: block; padding: 10px; } .ui-datepicker-calendar td a { color: $primary-color; display: block; padding: 10px; // &:hover { color: $white; background-color: $primary-color; } // &.ui-state-active { color: $white; background: $primary-color; } } .ui-datepicker-title { clear: both; } .ui-datepicker-prev { float: left; } .ui-datepicker-next { float: right; }