arrow_back
View code

<div class="datepicker-container position-relative width-90 width-20@md margin-x-auto margin-top-xlg">
  <div class="datepicker-input position-relative">
    <input type="text" placeholder="yyyy/mm/dd" />
    <span class="material-icons icon">
      date_range
    </span>
  </div>
  <div class="datepicker shadow-md radius-md">
    <div class="header">
      <div class="controls">
        <span class="position-absolute width-100 text-xs font-medium month-label flex items-center height-100 justify-center padding-sm">April
          2021</span>
        <nav>
          <div class="prev control radius-sm">
            <span class="material-icons">
              chevron_left
            </span>
          </div>
          <div class="next control radius-sm">
            <span class="material-icons">
              chevron_right
            </span>
          </div>
        </nav>
      </div>
      <div class="weekdays-label">
        <div><span>M</span></div>
        <div><span>T</span></div>
        <div><span>W</span></div>
        <div><span>T</span></div>
        <div><span>F</span></div>
        <div><span>S</span></div>
        <div><span>S</span></div>
      </div>
    </div>
    <div class="days"></div>
  </div>
                        
Copy HTML

/*
 * File: _date-picker.scss
 * Location /src/scss/components
 * Date picker component
 */

:root {
    --datepicker-item-size: 2.7em;
    --datepicker-nav-size: 2em;
    --datepicker-item-font-size: 0.9em;
    --datepicker-distance: 0.3em;
}
.datepicker-container {
    position: relative;
    input {
        padding-right: 2rem;
        font-size: var(--text-xs);
    }
    .icon {
        position: absolute;
        right: 0.2em;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--color-higher);
        transition: transform 0.2s;
        &:active {
            transform: translateY(-50%) scale(1.05);
        }
    }
    .datepicker {
        display: inline-block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        left: 0;
        top: calc(100% + var(--datepicker-distance));
        position: absolute;
        padding: 0.4em;
        transition: visibility 0.2s, opacity 0.2s;
        
        &.show {
            opacity: 1;
            visibility: visible;
            pointer-events: inherit;
        }

        .header {
            position: relative;
            .month-label {
                z-index: -1;
            }
            .controls {
                position: relative;
                nav {
                    display: flex;
                    justify-content: space-between;
                    .control {
                        width: var(--datepicker-item-size);
                        height: var(--datepicker-item-size);
                        transition: transform 0.2s;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        &:hover {
                            background-color: var(--color-lowest);
                        }
                        span {
                            font-size: var(--datepicker-nav-size);
                            font-size: var(--datepicker-nav-size);
                            color: var(--color-mid);
                            user-select: none;
                        }
                        &.next {
                            &:active {
                            transform: translateX(0.05em);
                            }
                        }
                        &.prev {
                            &:active {
                            transform: translateX(-0.05em);
                            }
                        }
                    }
                }
            }
        
            .weekdays-label {
                display: flex;
                flex-wrap: wrap;
                color: var(--color-mid);
                div {
                    width: var(--datepicker-item-size);
                    height: var(--datepicker-item-size);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span {
                        font-size: var(--datepicker-item-font-size);
                        user-select: none;
                    }
                }
            }
        }
        .days {
            display: flex;
            flex-wrap: wrap;
            color: var(--color-higher);
            width: calc(7 * var(--datepicker-item-size));
            div {
                text-align: center;
                width: var(--datepicker-item-size);
                height: var(--datepicker-item-size);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: var(--radius-sm);
                &.today {
                    color: var(--primary-color);
                }
                &.selected {
                    background-color: var(--primary-color);
                    color: var(--color-white);
                }
                &.in-range {
                    background-color: var(--primary-color-lighter);
                }
                &:not(.selected):hover {
                    background-color: var(--color-lowest);
                }
                span {
                    font-size: var(--datepicker-item-font-size);
                }
            }
        }
    }
    &.range {
        .days {
            div {
                border-radius: 0;
                &.in-range {
                    background-color: var(--primary-color-lightest);
                }
            }
        }
    }
}



                        
Copy SCSS

/*
 * File: date-picker.js
 * Location /src/js/components
 * Date picker component
*/

class Datepicker {
    constructor(options) {
      const date = new Date();
      this.todayIndex = date.getDate();
      this.year = date.getFullYear();
      this.month = date.getMonth();
      this.currentMonth = this.month;
      this.userSelectedYear = null;
      this.userSelectedMonth = null;
      this.currentYear = this.year;
      this.day = null;
      this.callback = options.callback ? options.callback : null;
      this.separator = options.separator ? options.separator : '/'
      this.months =  options.months
      ? options.months
      : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Auguest',
        'September', 'October', 'November', 'December'];
      const datePickerContainer = options.selector;
      this.monthLabel = datePickerContainer.querySelector('.month-label');
      this.calendarIcon = datePickerContainer.querySelector('.month-label');
      this.daysContainer = datePickerContainer.querySelector('.days');
      this.nextTrigger = datePickerContainer.querySelector('.next');
      this.prevTrigger = datePickerContainer.querySelector('.prev');
      this.datePicker = datePickerContainer.querySelector('.datepicker');
      this.datePickerInput = datePickerContainer.querySelector('.datepicker-input input');
      this.datePickerInput.placeholder = `yyyy${this.separator}mm${this.separator}dd`;
      this.datePickerInput.addEventListener('click', e => {
        this.datePicker.classList.add('show');  
      });
      const calendarIcon = datePickerContainer.querySelector('.icon');
      calendarIcon.addEventListener('click', e => {
        this.datePicker.classList.add('show');  
      });

      this.datePickerInput.addEventListener('change', e => {
        const userDate = e.target.value;
        const dateArray = userDate.split(this.separator);
        this.year = this.userSelectedYear = dateArray[0];
        this.month = this.userSelectedMonth =  parseInt(dateArray[1]) - 1;
        this.day = parseInt(dateArray[2]);
        this.generateDatePickerPanel();
      })
      document.addEventListener('click', e => {
        if (e.target.closest(".datepicker")) return;
        if (e.target != this.datePicker 
        && e.target != this.datePickerInput 
        && e.target != calendarIcon) {
          this.datePicker.classList.remove('show');  
        }
      });
      
      this.initializeControls();
      this.generateDatePickerPanel();
    }
    initializeControls() {
      this.nextTrigger.addEventListener('click', () => this.next());
      this.prevTrigger.addEventListener('click', () => this.prev());
    }
    next() {
      if (this.month === 11) {
        this.month = 0;
        this.year = this.year + 1;
      } else {
        this.month = this.month + 1;
      }
      this.generateDatePickerPanel();
    }
    prev() {
      if (this.month === 0) {
        this.month = 11;
        this.year = this.year - 1;
      } else {
        this.month = this.month - 1;
      }
      this.generateDatePickerPanel();
    }
    getDate() {
      return this.datePickerInput.value;
    }
    generateDatePickerPanel() {
      this.monthLabel.innerHTML = `${this.months[this.month]} ${this.year}`;
      const startingDayIndex = new Date(this.year + "/" + (this.month + 1) + "/01").getDay();
      const numberOfDays = this.numberOfDaysInMonth();
      this.daysContainer.innerHTML = '';
      for (let i = 1; i < startingDayIndex; i++) {
        this.createDay('');
      }
      for (let i = 1; i <= numberOfDays; i++) {
        this.createDay(i, this.todayIndex, this.day);
      }
    }
    numberOfDaysInMonth() {
      return new Date(this.year, this.month + 1, 0).getDate();
    }
    createDay(day, today, selected) {
      const dayContainer = document.createElement('div');
      if (day === today && this.month === this.currentMonth && this.year === this.currentYear) {
        dayContainer.classList.add('today');
      }
      if (day === selected && this.month === this.userSelectedMonth && this.year === this.userSelectedYear) {
        dayContainer.classList.add('selected');
      }

      dayContainer.addEventListener('click', () => {
        this.datePickerInput.value = `${this.year}${this.separator}${this.format(this.month+1)}${this.separator}${this.format(day)}`;
        this.userSelectedMonth = this.month;
        this.userSelectedYear = this.year;
        this.day = day;

        if (this.daysContainer.querySelector('.selected')) {
          this.daysContainer.querySelector('.selected').classList.remove('selected');
        }
        dayContainer.classList.add('selected');
        this.datePicker.classList.remove('show');
        if (this.callback) {
          this.callback(this.getDate());
        } 

      });
      const dayEl = document.createElement('span');
      dayContainer.appendChild(dayEl);
      dayEl.innerHTML = day;
      this.daysContainer.appendChild(dayContainer);
    }
    format(val) {
      return ((val+'').length === 1) ? '0'+val : val;
    }
  }
  new Datepicker({
    selector: document.querySelector('.datepicker-container'),
    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
        'Sep', 'Oct', 'Nov', 'Dec'],
    separator: '-',
    callback: function(date) {
      console.log(date);
    }
  });
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.