JavaScript Calendar: Year Month Picker

This section'll explore configuring the jSuites calendar plugin to function as a JavaScript year and month picker selector. This setup excludes daily selection, allowing developers to customize the calendar more precisely according to specific application requirements.

Example

JavaScript Year Month Picker

This feature presents a streamlined interface, enabling users to efficiently navigate and select specific year and month combinations. It's particularly suitable for scenarios such as generating reports, accessing archives, or any use case where the day of the month is of secondary importance.

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

<input id='calendar' />

<script>
// Enable the year and month picker
jSuites.calendar(document.getElementById('calendar'), {
    type: 'year-month-picker',
    format: 'MMM-YYYY',
    validRange: [ '2024-02-01', '2025-12-31' ]
});
</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} type={'year-month-picker'}
        format={'MMM-YYYY'}
        validRange={['2024-02-01', '2025-12-31']} />
    </div>
  );
}

export default App;

<template>
    <Calendar ref="calendar" type="year-month-picker" format="DD/MM/YYYY HH:MM" :validRange="['2024-02-01', '2025-12-31']" />
</template>

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

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

Edit this page on GitHub