date-picker
resource: http://amsul.ca/pickadate.js/date/
source files: https://github.com/amsul/pickadate.js/tree/master/lib
react specific:
https://github.com/airbnb/react-dates // chosen
https://www.codementor.io/chrisharrington/tutorials/build-date-picker-react-js-classes-du107v566
https://github.com/Hacker0x01/react-datepicker
https://github.com/zippyui/react-date-picker
other examples:
https://github.com/dbushell/Pikaday
//basic options
// Strings and translations
monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
showMonthsShort: undefined,
showWeekdaysFull: undefined,
// Buttons
today: 'Today',
clear: 'Clear',
close: 'Close',
// Accessibility labels
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',
// Formats
format: 'd mmmm, yyyy',
formatSubmit: undefined,
hiddenPrefix: undefined,
hiddenSuffix: '_submit',
hiddenName: undefined,
// Editable input
editable: undefined,
// Dropdown selectors
selectYears: undefined,
selectMonths: undefined,
// First day of the week
firstDay: undefined,
// Date limits
min: undefined,
max: undefined,
// Disable dates
disable: undefined,
// Root picker container
container: undefined,
// Hidden input container
containerHidden: undefined,
// Close on a user action
closeOnSelect: true,
closeOnClear: true,
// Events
onStart: undefined,
onRender: undefined,
onOpen: undefined,
onClose: undefined,
onSet: undefined,
onStop: undefined,
// Classes
klass: {
// The element states
input: 'picker__input',
active: 'picker__input--active',
// The root picker and states *
picker: 'picker',
opened: 'picker--opened',
focused: 'picker--focused',
// The picker holder
holder: 'picker__holder',
// The picker frame, wrapper, and box
frame: 'picker__frame',
wrap: 'picker__wrap',
box: 'picker__box',
// The picker header
header: 'picker__header',
// Month navigation
navPrev: 'picker__nav--prev',
navNext: 'picker__nav--next',
navDisabled: 'picker__nav--disabled',
// Month & year labels
month: 'picker__month',
year: 'picker__year',
// Month & year dropdowns
selectMonth: 'picker__select--month',
selectYear: 'picker__select--year',
// Table of dates
table: 'picker__table',
// Weekday labels
weekdays: 'picker__weekday',
// Day states
day: 'picker__day',
disabled: 'picker__day--disabled',
selected: 'picker__day--selected',
highlighted: 'picker__day--highlighted',
now: 'picker__day--today',
infocus: 'picker__day--infocus',
outfocus: 'picker__day--outfocus',
// The picker footer
footer: 'picker__footer',
// Today, clear, & close buttons
buttonClear: 'picker__button--clear',
buttonClose: 'picker__button--close',
buttonToday: 'picker__button--today'
}
//example of the UI
https://github.com/motss/app-datepicker