calendar-input-r v1.1.11

calendar-input-r

📝 Description

CalendarInput is a customizable React component for date selection. It offers an intuitive interface with an input field and a pop-up calendar, allowing users to easily select dates.

✨ Features

• 📅 Interactive pop-up calendar
• 🚫 Support for disabled dates
• 📌 Disabling specific days of the week
• 🔤 Customizable labels for days of the week
• 🎨 Highly customizable through styles
• ⬅️ Navigation between months
• 🌐 Support for internationalization of days of the week

🛠️ Technologies Used

• React
• TypeScript
• CSS

📦 Installation

npm i calendar-input-r
# or
yarn add calendar-input-r

Usage

To use the CalendarInput, simply import it and pass the desired properties. Example:

import { useState } from "react";
import CalendarInput from "calendar-input-r";

const App = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    console.log("Date changed:", date);
    setSelectedDate(date);
  };

  const handleDateSelect = (date) => {
    console.log("Date selected:", date);
    setSelectedDate(date);
  };

  return (
    <div>
      <CalendarInput
        selectedDate={selectedDate}
        placeholder="Select a date"
        onChange={handleDateChange}
        onSelect={handleDateSelect}
      />
    </div>
  );
};

import { useState } from "react";
import CalendarInput from "calendar-input-r";

function App() {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  const handleDateChange = (date: Date | null) => {
    console.log("Date changed:", date);
    setSelectedDate(date);
  };

  const handleDateSelect = (date: Date) => {
    console.log("Date selected:", date);
    setSelectedDate(date);
  };

  return (
    <CalendarInput
      selectedDate={selectedDate}
      placeholder="Select a date"
      disabledDates={[new Date(2024, 2, 25)]}
      disabledWeekDays={["Saturday", "Sunday"]}
      onChange={handleDateChange}
      onSelect={handleDateSelect}
      daysCustomLabels={{
        sunday: "Sunday",
        monday: "Monday",
        tuesday: "Tuesday",
        wednesday: "Wednesday",
        thursday: "Thursday",
        friday: "Friday",
        saturday: "Saturday",
      }}
      leftButtonLabel="❮"
      rightButtonLabel="❯"
    />
  );
}

📋 Props

Style Properties

🎨 Style Customization

The component can be styled through style props or by overriding CSS classes:

.calendar { / Calendar styles / }
.day { / Day styles / }
.day.selected { / Selected day styles / }
.day.disabled { / Disabled day styles / }
.day-name { / Day name styles / }

🇧🇷 Versão em Português

O componente CalendarInput é um componente React customizável para seleção de datas. Ele oferece uma interface intuitiva com um campo de entrada e um calendário pop-up, permitindo aos usuários selecionar datas facilmente.

✨ Funcionalidades

• 📅 Calendário pop-up interativo
• 🚫 Suporte para datas desabilitadas
• 📌 Desabilitação de dias específicos da semana
• 🔤 Rótulos personalizáveis para dias da semana
• 🎨 Altamente customizável através de estilos
• ⬅️ Navegação entre meses
• 🌐 Suporte para internacionalização dos dias da semana

🛠️ Tecnologias Utilizadas

• React
• TypeScript
• CSS

📦 Instalação

npm i calendar-input-r
# ou
yarn add calendar-input-r

Uso

Para usar o CalendarInput, basta importá-lo e passar as propriedades desejadas. Exemplo:

import { useState } from "react";
import CalendarInput from "calendar-input-r";

const App = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    console.log("Data mudou:", date);
    setSelectedDate(date);
  };

  const handleDateSelect = (date) => {
    console.log("Data selecionada:", date);
    setSelectedDate(date);
  };

  return (
    <div>
      <CalendarInput
        selectedDate={selectedDate}
        placeholder="Selecione uma data"
        onChange={handleDateChange}
        onSelect={handleDateSelect}
      />
    </div>
  );
};

import { useState } from "react";
import CalendarInput from "calendar-input-r";

function App() {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  const handleDateChange = (date: Date | null) => {
    console.log("Date changed:", date);
    setSelectedDate(date);
  };

  const handleDateSelect = (date: Date) => {
    console.log("Date selected:", date);
    setSelectedDate(date);
  };

  return (
    <CalendarInput
      selectedDate={selectedDate}
      placeholder="Selecione uma data"
      disabledDates={[new Date(2024, 2, 25)]}
      disabledWeekDays={["Saturday", "Sunday"]}
      onChange={handleDateChange}
      onSelect={handleDateSelect}
      daysCustomLabels={{
        sunday: "Domingo",
        monday: "Segunda",
        tuesday: "Terça",
        wednesday: "Quarta",
        thursday: "Quinta",
        friday: "Sexta",
        saturday: "Sábado",
      }}
      leftButtonLabel="❮"
      rightButtonLabel="❯"
    />
  );
}

📋 Props

Propriedades de Estilo

🎨 Personalização de Estilos

O componente pode ser estilizado através das props de estilo ou sobrescrevendo as classes CSS:

.calendar { / Estilos do calendário / }
.day { / Estilos dos dias / }
.day.selected { / Estilos do dia selecionado / }
.day.disabled { / Estilos dos dias desabilitados / }
.day-name { / Estilos dos nomes dos dias / }