Quick to Set Up, Simple to Use

Reeling Date Picker

ReelPicker is a JavaScript date picker plugin that works seamlessly across all modern browsers and operating systems, providing a consistent look and user experience for date selection. you can install quickly and easily.

One-Time Payment 199USD

Buy

See Demos

98.29% Global Coverage

cross browser compatibility

iOS

Mac

Android

Win

Chrome FireFox Edge Safari at 04 Dec, 2024

Demo

Dark Mode

Dark Mode is available. If not specified, it will automatically follow user's device’s configuration.

Custom Return Value

The input value can be formatted, with options such as month display and specifying the number of digits.

Initial Date

The initial setting defaults to today's date and can be adjusted to any specific date

Reveal: ActionSheet

Revealing as an ActionSheet is available.

Note: the ActionSheet is primarily designed for mobile devices.

Language: it-IT

ReelPicker automatically detects the language. You can also set language specifically as an argument.

Language: zh-CN

Currently, 28 languages are supported, with more to be added in future updates.

Type:Date for fallback

By implementing with `type="date"`, even if the ReelPicker fails to function, it won't ciritically hinder user interaction.

Quick Start

1. embed a script tag and link tag inside your <head> tag.

HTML

<script src="path/to/reelpicker.min.js"></script>
<link rel="stylesheet" href="path/to/reelpicker.css">

2. implement input element with data-reelpicker attr.

HTML

<input type="date" data-reelpicker>

1. embed a script tag and link tag inside your <head> tag.

HTML

<script src="path/to/reelpicker.min.js"></script>
<link rel="stylesheet" href="path/to/reelpicker.min.css">

2. implement input element width class specify

HTML

<input type="text" class="reelpicker">

3. instantiate a ReelPicker with configuration arguments

HTML

<script>
  reelpicker('.reelpicker', {dark_mode: true, launch: 'actionsheet', return_value_format: 'MMM/DD/YY'});
</script>

Configuration

You can provide a JSON object as the second argument of the `reelpicker()` function to configure input value, language, initial date, and more, as described in the table below.

e.g.) reelpicker('.class-name', {theme: 'dark'});

key	default	type	description
return_value_format	'auto'	String	Configures the date format for the input value. the pattern will be replaced with the following format YYYY : the year of four digits. YY : the year of two digits. MMMM : the named month for long. MMM : the named month for short. MM : the numeric month of two digits. M : the numeric month of one digit. DD : the date of two digits. D : the date of one digit.
lang	'auto'	String	ReelPicker detects the language from the implemented document. If it doesn't work correctly, or if you want to use another language, Specify the intended one using this key. you can specify as: en-GB en-US en-PH en-SG en-MY en-BN en-TH en-ID zh-CN zh-SG zh-MY zh-TW zh-HK zh-MO hi-IN ja-JP pt-BR es-MX fr-FR it-IT pt-PT ko-KR es-ES es-CO es-US es-AR es-PR es-* de-DE If your language setting is not listed above, or if there are any cultural inaccuracies in format, please feel free to contact us, even for minor issues.
default	{}	Object	Sets the initial date to be displayed on the reel. e.g) {year: 2000, month: 1, date: 1}
dark_mode	'auto'	String \|\| Boolean	ReelPicker usually switches between light and dark modes automatically according to the device you use. To force one of the modes, Set this key to true or false.
launch	'balloon'	String	Sets the reveal as a 'balloon' or 'actionsheet'. note: the ActionSheet is primarily designed for mobiles.
actionsheet_max_width	520	Number \|\| Boolean	Sets the maximum width for displaying as the ActionSheet. If viewport width is greater than this number, then ReelPicker shows up as the Balloon instead.
display_month_for	'long'	String	Configures the format to display the named month. 'long' or 'short'.
font_loader	'auto'	String	Configures the auto-loading of fonts. Usually, ReelPicker automatically sets the proper fonts for the language used. when you want to use other fonts or the fonts applied to the document, use this configuration. 'auto' or 'disable'

Pricing

Unlimited Number of Products

-You can use ReelPicker in as many projects as you need.

One-Time Payment

-No recurring fees.

unlimited products

Purchase

payment with Lemon Squeezy (stripe)

Design Files

You can also download design files for the ReelPicker's appearance, available in both .xd and .fig formats.

Design File for adobe XD

Design File for Figma

If you're a designer considering implementing ReelPicker, these design files will be helpful for you !

If you encounter issues downloading the .xd file, please right-click and select 'Save As'.