Range Selection

Select date ranges for booking systems, filters, and date span inputs.

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>Start: <span id="start">-</span> | End: <span id="end">-</span></p>

<script>
const { Calendar } = calendarjs;

Calendar(document.getElementById('calendar'), {
    type: 'inline',
    range: true,
    value: '2025-12-01,2025-12-05',
    onchange: function(self, value) {
        if (value) {
            document.getElementById('start').textContent = value[0];
            document.getElementById('end').textContent = value[1]
        }
    }
});
</script>
</html>

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

export default function App() {
    const self = this;
    self.start = '2025-12-01';
    self.end = '2025-12-05';

    const change = (el, value) => {
        if (value) {
            self.start = value[0];
            self.end = value[1];
        }
    };

    return render => render`<div>
        <Calendar type="inline" range="true" value="2025-12-01,2025-12-05" onchange="${change}" />
        <p>Start: ${self.start} | End: ${self.end}</p>
    </div>`;
}

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

export default function App() {
    const [start, setStart] = useState('2025-12-01');
    const [end, setEnd] = useState('2025-12-05');

    const handleChange = (self, value) => {
        if (value) {
            setStart(value[0]);
            setEnd(value[1]);
        }
    };

    return (
        <div>
            <Calendar type="inline" range={true} value="2025-12-01,2025-12-05" onchange={handleChange} />
            <p>Start: {start} | End: {end}</p>
        </div>
    );
}

<template>
    <div>
        <Calendar type="inline" :range="true" value="2025-12-01,2025-12-05" @onchange="handleChange" />
        <p>Start: {{ start }} | End: {{ end }}</p>
    </div>
</template>

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

export default {
    components: { Calendar },
    data() {
        return { start: '2025-12-01', end: '2025-12-05' };
    },
    methods: {
        handleChange(self, value) {
            if (value) {
                this.start = value[0];
                this.end = value[1];
            }
        }
    }
}
</script>

Edit this page on GitHub

Range Selection

Example

Related