Date Picker
Avatar This is a guideline for you on how to create you first product in your store
Date Picker
This is a guideline for you on how to create you first product in your store
Default
Disabled
Choose a date
Choose a date
Date Picker (Multiple Date Selector)
This is a guideline for you on how to create you first product in your store
Default
Disabled
Choose a date
Choose a date
React js
import React, { useState } from 'react';
import DatePicker from 'vestarplus/DatePicker';
/**
* DatePicker Component
*
* The DatePicker component provides a user-friendly date selection interface.
* It can be used for both single date selection and range date selection.
*
* @component
* @example
* // Single date selection
* <DatePicker onSave={(date) => console.log('Saved Date:', date)} />
*
* // Range date selection
* <DatePicker
* range
* onSave={(startDate, endDate) => console.log('Saved Range:', startDate, endDate)}
* />
*
* @param {Object} props - Component properties.
* @param {boolean} [props.disabled=false] - Disables the date picker.
* @param {boolean} [props.range=false] - Enables range date selection.
* @param {Function} [props.onSave] - Callback function invoked when a date or range is saved.
* @returns {JSX.Element} - The rendered DatePicker component.
*/
const CustomDatePicker = (props) => {
const [savedDate, setSavedDate] = useState(null);
const handleSave = (startDate, endDate) => {
props.onSave && props.onSave(startDate, endDate);
// Assuming you want to update a local state with the saved date(s)
setSavedDate({
startDate: startDate && startDate.toISOString(),
endDate: endDate && endDate.toISOString(),
});
};
return (
<div>
<DatePicker {...props} onSave={handleSave} />
{/* You can display the saved date(s) if needed */}
{savedDate && (
<div>
Saved Date: {savedDate.startDate} - {savedDate.endDate}
</div>
)}
</div>
);
};
export default CustomDatePicker;
Time Picker
Avatar This is a guideline for you on how to create you first product in your store
Time Picker
This is a guideline for you on how to create you first product in your store
Default
Disabled
HH:MM
HH:MM
React js
import React from 'react';
import TimePicker from 'vestarplus/TimePicker';
/**
* TimePicker Component
*
* The TimePicker component provides a user-friendly interface for selecting a specific time.
* It supports 24-hour format and can be customized for different use cases.
*
* @component
* @example
* // Basic TimePicker
* <TimePicker />
*
* // TimePicker with Save Button
* <TimePicker showSaveButton />
*
* // Disabled TimePicker
* <TimePicker disabled />
*
* @param {Object} props - Component properties.
* @param {boolean} [props.disabled=false] - Disables the time picker.
* @param {function} [props.onSave] - Callback function invoked when the "Save" button is clicked. It receives the selected time as an argument.
* @returns {JSX.Element} - The rendered TimePicker component.
*/
const TimePickerFunction = (props) => {
return (
<TimePicker
disabled={props.disabled}
onSave={props.onSave}
/>
);
};
export default TimePickerFunction;
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<div class="custom-time-picker">
<div class="input-time-picker" onclick="showTimePicker()">
<div class="display-time-in-input">
<span id="displayedTime">HH:MM</span>
</div>
<div class="calendar-day-icon">
<!-- Clock icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
</div>
</div>
<div id="timePicker" class="time-picker-variants" style="display: none;">
<div class="time-center">time</div>
<div class="section-1">
<div class="hours-container mt-4">
<div class="hours" id="hoursContainer"></div>
</div>
<div class="minutes-container mt-4">
<div class="minutes" id="minutesContainer"></div>
</div>
</div>
<div class="section-3">
<button class="cancel" onclick="cancelTimeSelection()">Cancel</button>
<button class="save" onclick="saveTime()">Save</button>
</div>
</div>
</div>
<script src="./script.js" />
</body>
</html>