Time Slot 15 Minutes Interval using React JS & Moment Js

So, Let’s get started with the code first you need to create the react project using below command.

npx create-react-app slotapp

After creating the project install the react package moment.

After creating the project and Installing the react package let’s create a file name called slot.js

Now, you need to create two variables: inTime and outTime. Whatever time you enter for inTime, the slot timing will start from that point. Similarly, for outTime, whatever time you enter, the slots will stop there."

Get Yadavashishdhirendra’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
import React, { useState } from 'react'
import moment from 'moment';
import './slot.css'

const Slot = () => {

  let inTime = "12:00 Pm"
  let outTime = "08:00 Pm"

  return (
    <div className='slots'>
      
    </div>
  )
}

export default Slot

Now let’s create a function for creating the slots of 15 minutes intervals.

import React, { useState } from 'react'
import moment from 'moment';
import './slot.css'

const Slot = () => {

  let inTime = "12:00 Pm"
  let outTime = "08:00 Pm"

  function intervals(startString, endString) {
    var start = moment(startString, 'hh:mm a');
    var end = moment(endString, 'hh:mm a');
    start.minutes(Math.ceil(start.minutes() / 15) * 15);

    var current = moment(start);

    while (current <= end) {
      if (slots.includes(current.format('hh:mm a'))) {
        return null
      }
      else {
        slots.push(current.format('hh:mm a'));
        current.add(15, 'minutes');
      }
    }

    return slots;
  }

  return (
    <div className='slots'>
      
    </div>
  )
}

export default Slot

“After creating this function, you need to call it. But before that, you also need to create a useState array where you store the slots.”

import React, { useState } from 'react'
import moment from 'moment';
import './slot.css'

const Slot = () => {

  let inTime = "12:00 Pm"
  let outTime = "08:00 Pm"

  const [slots, setSlots] = useState([]);

  function intervals(startString, endString) {
    var start = moment(startString, 'hh:mm a');
    var end = moment(endString, 'hh:mm a');
    start.minutes(Math.ceil(start.minutes() / 15) * 15);

    var current = moment(start);

    while (current <= end) {
      if (slots.includes(current.format('hh:mm a'))) {
        return null
      }
      else {
        slots.push(current.format('hh:mm a'));
        current.add(15, 'minutes');
      }
    }

    return slots;
  }

intervals(inTime, outTime);

  return (
    <div className='slots'>
      
    </div>
  )
}

export default Slot

“Now, the slots of 15-minute intervals have been pushed into the slots useState array. You can check this by using console.log(slots). Additionally, you can use the map function in JSX to see the actual result."

import React, { useState } from 'react'
import moment from 'moment';
import './slot.css'

const Slot = () => {

  let inTime = "12:00 Pm"
  let ouTtime = "08:00 Pm"

  const [slots, setSlots] = useState([]);

  function intervals(startString, endString) {
    var start = moment(startString, 'hh:mm a');
    var end = moment(endString, 'hh:mm a');
    start.minutes(Math.ceil(start.minutes() / 15) * 15);

    var current = moment(start);

    while (current <= end) {
      if (slots.includes(current.format('hh:mm a'))) {
        return null
      }
      else {
        slots.push(current.format('hh:mm a'));
        current.add(15, 'minutes');
      }
    }

    return slots;
  }

intervals(inTime, outTime);

  return (
    <div className='slots'>
       {
        slots && slots.length > 0 ? slots.map((time, index) => {
          return (
            <div key={index}>
              <p>{time}</p>
            </div>
          )
        }) : null
      }
    </div>
  )
}

export default Slot

Let’s write the CSS to style the slots.

.slots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  max-width: 100%;
  margin: 30px auto;
  grid-gap: 2rem;
}

.slots>div{
  background-color: #F7F7F7;
  text-align: center;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin: 0px 20px 0px 20px;
}

.slots>div>p{
  font-weight: bold;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}