JavaScript Calendar: Range Validations

The validRange property allows partial definitions, enabling you to set a start or an end date. This flexibility supports ranges that begin from a specific date or end at a particular date while leaving the other boundary open-ended.

<html>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

<input id='calendar' />

<script>
// Create the calendar
jSuites.calendar(document.getElementById('calendar'), {
    time: true,
    format: 'DD/MM/YYYY HH24:MI',
    placeholder: 'DD/MM/YYYY HH24:MI',
    readonly: false,
    // Define the valid range of dates
    validRange: [ '2024-06-01', '2026-06-01' ]
});
</script>
</html>

import { Calendar } from 'jsuites/react'
import { useRef } from 'react'
import 'jsuites/dist/jsuites.css'


function App() {
  const calendar = useRef(null);

  return (
    <div className="App">
      <Calendar ref={calendar} time={true}
        format={'DD/MM/YYYY HH24:MI'}
        placeholder={'DD/MM/YYYY HH24:MI'}
        readonly={false}
        validRange={['2024-06-01', '2026-06-01']} />
    </div>
  );
}

export default App;

<template>
    <Calendar ref="calendar" :time="true" format="DD/MM/YYYY HH24:MI" placeholder="DD/MM/YYYY HH24:MI" :readonly="false"
        :validRange="['2024-06-01', '2026-06-01']" />
</template>

<script>
import { Calendar } from "jsuites/vue";
import 'jsuites/dist/jsuites.css'

export default {
    name: 'App',
    components: {
        Calendar
    },
}
</script>

More examples

Explore additional use cases for the jSuites JavaScript Calendar plugin: