返回排行榜

amsul/pickadate.js

JavaScriptamsul.ca/pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

pickerdatetimecalendar
Star 增长趋势
Star
7.7k
Forks
984
周增长
Issues
300
2k4k6k
2023年1月2024年3月2025年5月2026年7月
制品库npmnpm install pickadate.js
README

pickadate Build status: master jsDelivr Hits

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Join the community on Spectrum

To get started, check out the:

Homepage - Date picker - Time picker - API

To get it:

Download the latest stable build

or

git clone git://github.com/amsul/pickadate.js.git

or

bower install pickadate


Library files

The lib folder includes the library files with a compressed folder containing the minified counter-parts. These files are minified using Grunt.

Pickers

There are three picker files:

  • picker.js The core file (required before any other picker)
  • picker.date.js The date picker
  • picker.time.js The time picker

To support old browsers, namely IE8, also include the legacy.js file.

Themes

All themes are generated using LESS and compiled from the lib/themes-source folder into the lib/themes folder.

There are two themes:

  • default.css The default modal-style theme
  • classic.css The classic dropdown-style theme

Based on the theme, pick the relevant picker styles:

  • default.date.css and default.time.css when using the default theme
  • classic.date.css and classic.time.css when using the classic theme

** For languages with text flowing from right-to-left, also include the rtl.css stylesheet.

Translations

The translations live in the lib/translations folder. There are currently 43 language translations included.


Building with Grunt

Grunt ~0.4.5 is used to build the project files. To get started, clone the project and then run:

  • npm install to get the required node modules.
  • grunt test --verbose to confirm you have all the dependencies.

Type out grunt --help to see a list of all the tasks available. The generally used tasks are:

  • grunt develop compiles the LESS files and watches for any source changes.
  • grunt package compiles and then minifies the source files.
  • grunt test tests the entire package.

Styling with LESS

The picker themes are built using LESS with Grunt. To customize the CSS output, read the _variables.less file in the lib/themes-source folder. You can specify:

  • colors for the theme,
  • sizes for the picker,
  • media-query breakpoints,
  • and a whole bunch of other stuff.

Make sure to run the grunt develop task before making any changes to compile it into CSS.


Bugs

Before opening a new issue, please search the existing Issues for anything similar – there might already be an answer to your problem. You might also wanna check out the Contributing guide.


Contributing

Before contributing any code to the project, please take a look at the Contributing guide.

If there’s anything you’d like to discuss, we like to hang out on Spectrum.

Spectrum


Support

If you find this library useful and would like to see further development, consider supporting it.




© 2014 Amsul

Licensed under MIT

相关仓库
LuckSiege/PictureSelector

Picture Selector Library for Android or 图片选择器

JavaMavenApache License 2.0androidandroid-image-selector
13.6k3.1k
missive/emoji-mart

🏪 One component to pick them all

TypeScriptnpmMIT Licenseemoji-pickeremoji
missiveapp.com/open/emoji-mart
9.4k904
react-native-image-picker/react-native-image-picker

:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

JavaMavenMIT Licensereact-nativeimage-picker
8.6k2.1k
Hacker0x01/react-datepicker

A simple and reusable datepicker component for React

TypeScriptnpmMIT Licensedatepicker-componentreact
reactdatepicker.com
8.4k2.3k
Eonasdan/tempus-dominus

This project is no longer active or supported.

HTMLMIT Licensepickertempus-dominus
getdatepicker.com
7.2k4.3k
gzu-liyujiang/AndroidPicker

安卓选择器类库,包括日期及时间选择器(可用于出生日期、营业时间等)、单项选择器(可用于性别、民族、职业、学历、星座等)、二三级联动选择器(可用于车牌号、基金定投日期等)、城市地址选择器(分省级、地市级及区县级)、数字选择器(可用于年龄、身高、体重、温度等)、日历选日期择器(可用于酒店及机票预定日期)、颜色选择器、文件及目录选择器、图片选择器等……WheelPicker/DatePicker/TimePicker/OptionPicker/NumberPicker/LinkagePicker/AddressPicker/CarPlatePicker/CalendarPicker/ColorPicker/FilePicker/ImagePicker etc.

JavaMavenOtherwheelviewpicker
6.8k1.5k
dillidon/alerts-and-pickers

Advanced usage of UIAlertController and pickers based on it: Telegram, Contacts, Location, PhotoLibrary, Country, Phone Code, Currency, Date...

SwiftMIT Licenseuialertcontrollerpicker
5.8k702
longitachi/ZLPhotoBrowser

Wechat-like image picker. Support select photos, videos, gif and livePhoto. Support edit image and crop video. 微信样式的图片选择器,支持预览/相册内拍照及录视频、拖拽/滑动选择,编辑图片/视频,支持多语言国际化等功能;

SwiftApache License 2.0imagepickereditimage
5k1k
wdullaer/MaterialDateTimePicker

Pick a date or time on Android in style

JavaMavenApache License 2.0material-designandroid-library
4.6k932
Yummypets/YPImagePicker

📸 Instagram-like image picker & filters for iOS

SwiftMIT Licenseimagepickerpicker
4.5k1k
simonwep/pickr

🎨 Pickr - A simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

JavaScriptnpmMIT Licensecolor-pickercolorpicker
simonwep.github.io/pickr
4.5k291
omgovich/react-colorful

🎨 A tiny (2,8 KB) color picker component for React and Preact apps

TypeScriptnpmMIT Licensecolor-pickercolor
omgovich.github.io/react-colorful
3.5k121