Datetime Slot Picker
This is a Web Component for Date and Time Slot Picker. This project is a standalone Web Component built using StencilJS.
You have to pass in dates and time slots that you want to display.
When "timeSlots" is not passed, the component acts as a pure date picker.
This date and time slot picker is useful for below cases:
- If you have a set of dates that alone should be available for user input
- If you also want to display a custom time slot along with the date, eg: Sat, 28 Nov 2020, 10 AM - 11 AM.
- Useful for appointment booking, choosing a delivery time, restaurant reservation, etc.
- Supports multi language translations. You can pass your own translations and display text.
- Supports displaying time slots in multiple formats: Eg: 4 PM, 4:00 PM, 16:00, 4 PM - 5 PM, 4:00 PM - 5:00 PM, 16:00 - 17:00.
Usage and Live Demo
Using the component in HTML
The properties are optional, you can use them to pass custom text.
<datetime-slot-picker
placeholder="Pick a time slot"
time-slots-text="Time"
no-slots-text="No slots are available"
>
</datetime-slot-picker>
To display time slots in HH:mm format, pass the "am-pm-disabled" property. The "dates-hidden-when-times-shown" property can be used if you would like to make the popup more compact, when time slots are shown the date calendar will be hidden.
<datetime-slot-picker
placeholder="Pick a time slot"
time-slots-text="Time"
no-slots-text="No slots are available"
am-pm-disabled
dates-hidden-when-times-shown
>
</datetime-slot-picker>
Initializing slots & listening to slot changes in Javascript
Add the below code inside in your HTML. Ensure the input date and time format is as stated below.
Supported input date format:
- ddd, D MMM YYYY (Thu, 26 Nov 2020)
Supported input time formats: (Pick a format and all time slots should be the same format)
- H A (10 AM)
- H:mm A (10:00 AM)
- H A - H A (10 AM - 11 AM)
- H:mm A - H:mm A (10:00 AM - 11:00 AM)
const datetimeSlotPicker = document; datetimeSlotPicker; datetimeSlotPickerslots = date: 'Thu, 26 Nov 2020' timeSlots: '10:00 AM' '11:00 AM' '4:00 PM' '5:00 PM' date: 'Fri, 27 Nov 2020' timeSlots: '10:00 AM' '11:00 AM' '4:00 PM' '5:00 PM' ;
If you are passing translations (using Javascript as shown below), you can set the language code
<datetime-slot-picker
placeholder="Pick a time slot"
time-slots-text="Time"
no-slots-text="No slots are available"
language="en"
>
</datetime-slot-picker>
To pass translations, also set the translations property as shown below. You can have multiple langage codes like "en".
const datetimeSlotPicker = document; datetimeSlotPicker; datetimeSlotPickerslots = date: 'Thu, 26 Nov 2020' timeSlots: '10 AM - 11 AM' '11 AM - 12 PM' '4 PM - 5 PM' '5 PM - 6 PM' date: 'Fri, 27 Nov 2020' timeSlots: '10 AM - 11 AM' '11 AM - 12 PM' '4 PM - 5 PM' '5 PM - 6 PM' ; datetimeSlotPickertranslations = en: Mon: 'Mon' Tue: 'Tue' Wed: 'Wed' Thu: 'Thu' Fri: 'Fri' Sat: 'Sat' Sun: 'Sun' AM: 'AM' PM: 'PM' Jan: 'Jan' Feb: 'Feb' Mar: 'Mar' Apr: 'Apr' May: 'May' Jun: 'Jun' Jul: 'Jul' Aug: 'Aug' Sep: 'Sep' Oct: 'Oct' Nov: 'Nov' Dec: 'Dec' ;
Using this component
There are three strategies we recommend for using web components built with Stencil.
Script tag
- Put a script tag similar to this
<script src='https://unpkg.com/datetime-slot-picker/dist/datetime-slot-picker/datetime-slot-picker.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install datetime-slot-picker --save
- Put a script tag similar to this
<script src='node_modules/datetime-slot-picker/dist/datetime-slot-picker/datetime-slot-picker.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
In a stencil-starter app
- Run
npm install datetime-slot-picker --save
- Add an import to the npm packages
import datetime-slot-picker;
- Then you can use the element anywhere in your template, JSX, html etc
Customizing Appearance
You can customize the styling by using CSS. All HTML elemets have a class name (usually starting with "neo", Eg: "neo-input") that can be used.
Developers
To run the project locally, run:
gh repo clone cyberabis/datetime-slot-pickercd datetime-slot-pickernpm installnpm start
To build the component for production, run:
npm run build
The scripts will be generated under dist/datetime-slot-picker. The whole folder needs to be served, datetime-slot-picker.js acts as the entry point that's included in HTML.
NPM Repository
https://www.npmjs.com/package/datetime-slot-picker
Raising issues / getting help?
Please use the GitHub issue tracker - https://github.com/cyberabis/datetime-slot-picker/issues.