Date Validation

Restrict selectable dates using the validRange property.

Example

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>

<div id="calendar"></div>
<p>Selected: <span id="selected">2024-06-15</span></p>

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    value: '2024-06-15',
    validRange: ['2024-06-01', '2024-06-30'],
    onchange: function(self, value) {
        document.getElementById('selected').textContent = value;
    }
});
</script>
</html>

import { Calendar } from '@calendarjs/ce';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const self = this;
    self.selected = '2024-06-15';

    const change = (el, value) => {
        self.selected = value;
    };

    return render => render`<div>
        <Calendar type="inline" value="2024-06-15" validRange="${['2024-06-01', '2024-06-30']}" onchange="${change}" />
        <p>Selected: ${self.selected}</p>
    </div>`;
}

import { useState } from 'react';
import { Calendar } from '@calendarjs/ce/dist/react';
import '@calendarjs/ce/dist/style.css';

export default function App() {
    const [selected, setSelected] = useState('2024-06-15');

    return (
        <div>
            <Calendar
                type="inline"
                value="2024-06-15"
                validRange={['2024-06-01', '2024-06-30']}
                onchange={(self, value) => setSelected(value)}
            />
            <p>Selected: {selected}</p>
        </div>
    );
}

<template>
    <div>
        <Calendar type="inline" value="2024-06-15" :validRange="['2024-06-01', '2024-06-30']" @onchange="handleChange" />
        <p>Selected: {{ selected }}</p>
    </div>
</template>

<script>
import { Calendar } from '@calendarjs/ce/dist/vue';
import '@calendarjs/ce/dist/style.css';

export default {
    components: { Calendar },
    data() {
        return { selected: '2024-06-15' };
    },
    methods: {
        handleChange(self, value) {
            this.selected = value;
        }
    }
}
</script>

Edit this page on GitHub

Date Validation

Example

Related