Rudeg / React Input Calendar
Licence: mit
Stars: ✭ 138
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Input Calendar
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: ✭ 86 (-37.68%)
Mutual labels: calendar, moment
Moment Hijri
A Hijri calendar (Based on Umm al-Qura calculations) plugin for moment.js
Stars: ✭ 144 (+4.35%)
Mutual labels: moment, calendar
React Native Event Calendar
A React-Native iOS style calendar implemented using VirtualizedList.
Stars: ✭ 127 (-7.97%)
Mutual labels: props, calendar
React Datepicker
📅 React DatePicker Library (Flexible, Reusable)
Stars: ✭ 165 (+19.57%)
Mutual labels: moment, calendar
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (+288.41%)
Mutual labels: moment, calendar
Moment.php
Parse, validate, manipulate, and display dates in PHP w/ i18n support. Inspired by moment.js
Stars: ✭ 900 (+552.17%)
Mutual labels: moment, calendar
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (-21.01%)
Mutual labels: moment, calendar
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 :轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+1044.2%)
Mutual labels: calendar
Styled By
Simple and powerful lib to handle styled props in your components
Stars: ✭ 122 (-11.59%)
Mutual labels: props
Booking App
Laravel 5.1 web application for booking appointments
Stars: ✭ 130 (-5.8%)
Mutual labels: calendar
Jalali Angular Datepicker
Highly configurable jalali (shamsi, khorshidi, persian) date picker built for Angular ( 2 or more ) applications
Stars: ✭ 125 (-9.42%)
Mutual labels: moment
Moment Precise Range
A moment.js plugin to display human-readable date/time ranges
Stars: ✭ 134 (-2.9%)
Mutual labels: moment
Skcalendarview
SKCalendarView是一个高可控性的日历基础组件,为了提高应用的自由度,默认只提供了日历部分的视图封装,但不涵盖切换月份按钮、年月分显示等非关键性控件,但请不要担心,SKCalendarView为你提供了多样性的API,你可以很轻松的拿到这些信息去展示在你自己的自定义控件中。不仅如此,SKCalendarView还为你封装了公历、农历、节假日以及中国24节气的核心算法,即使你觉得默认的视图并不合胃口,也可以直接快速的利用这套算法创造出一个全新的日历控件。最后,SKCalendarView还提供了一些简单的切换动画,如果你不喜欢它,可以忽略掉,用自己的,这里完全不会受到任何限制。
Stars: ✭ 121 (-12.32%)
Mutual labels: calendar
Egroupware
Web based groupware server written in PHP, forum at https://help.egroupware.org/
Stars: ✭ 128 (-7.25%)
Mutual labels: calendar
React Input Calendar
React component for calendar widget.
Installation
React Input Calendar is available as an npm package.
npm install react-input-calendar
Use browserify and reactify for dependency management and JSX transformation.
All styles written in CSS and are in style/index.css
Demo
http://rudeg.github.io/react-input-calendar
Usage
import Calendar from 'react-input-calendar'
<Calendar format='DD/MM/YYYY' date='4-12-2014' />
Dependencies
API
props.format
String
- default: 'MM-DD-YYYY'
- Allowed Keys: All formats supported by moment.js
- Format of date, which display in input and set in date property
props.parsingFormat
-
String
orArray
- default: 'props.format'
- Allowed Keys: All formats supported by moment.js
- This property allows the parsing format to be different to the display format.
- Format or Formats could be used to parse manually entered dates. The parsing does only happen if the date was entered manually and on blur of the input field gets called.
props.date
-
String
orDate
- default:
Current date
- set initial date value
props.minDate
-
String
orDate
- default:
null
- set the selectable minimum date
props.maxDate
-
String
orDate
- default:
null
- set the selectable maximum date
props.defaultView
-
Int
(from 0 to 2) - default:
0
(DaysView) - Set default view displayed. Values:
- 0 - days
- 1 - months
- 2 - years
props.minView
-
Int
(from 0 to 2) - default:
0
(DaysView) - Set minimal view. Values:
- 0 - days
- 1 - months
- 2 - years
props.displayYrWithMonth
Boolean
- default:
false
- If set
true
, the day view's header will show an abbreviated month and full year. Example: Instead of the header displaying 'December', it will display 'Dec 2016'
props.computableFormat
String
- default: 'MM-DD-YYYY'
- Allowed Keys: All formats supported by moment.js
- Format of date for the onChange event. Default on the date format (ISO 8601) to ease the save of data
props.strictDateParsing
Boolean
- default:
false
- If set
true
, the parsing process will catch bad dates and does not try to parse the date with the native js date function and does not set the date to now either. Therefore the computed date will be reported as 'Invalid date'.
props.onChange
Function
- default:
null
- Set a function that will be triggered whenever there is a change in the selected date. It will return the date in the
props.computableFormat
format.
props.onInputChange
Function
- default:
null
- Set a function that will be triggered within the input box's onChange handler, before the new value is set. It will take the event object and return a modified value.
props.onBlur
Function
- default:
null
- Set a function that will be triggered when the input field is blurred. It will return the event and the date in the props.computableFormat format.
props.hideOnBlur
Boolean
- default:
false
- Setting this value to true will hide the calendar, this works best in conjunction with onBlur prop.
props.onFocus
Function
- default:
null
- Set a function that will be triggered when the input field is focused.
props.onInputKeyDown
Function
- default:
null
- Set a function that will be triggered when a key is pressed down with the input field focused.
props.onInputKeyUp
Function
- default:
null
- Set a function that will be triggered when a key is released with the input field focused.
props.closeOnSelect
Boolean
- Default:
undefined
- Define state when date picker would close once the user has clicked on a date.
props.openOnInputFocus
Boolean
- Default:
undefined
- Setting this value to true makes the calendar widget open when the input field is focused.
props.hideIcon
Boolean
- Default:
false
- If true, the icon next to the input field will not be shown. Make sure you set openOnInputFocus to true if using this.
props.hideTouchKeyboard
Boolean
- default:
false
- If true, the keyboard won't be shown on touch devices.
props.placeholder
String
- default:
undefined
- Value to show in the input text box if no date is set.
props.todayText
String
- default:
'today'
- 'Today' button text.
props.inputName
String
- default:
null
- Define the name of the input field where the date picker represents its value.
props.inputFieldId
String
- default: null
- Define the ID of the input field where the date picker represents it's value. This can be useful when the date picker is
used with a label element. The label element can be bound to the input field using the
label for
attribute.
props.inputFieldClass
String
- default:
'input-calendar-value'
- Define the class name of the input field where the date picker represents its value.
props.disabled
Boolean
- default:
false
- If true, the input field gets disabled and the icon next to it disappears.
props.customIcon
String
- default:
null
- Define the className of the calendar icon. If you need to customize the calendar icon, I would recommend using FontAwesome's
fa fa-calendar
icon. Then, update the css style for the icon.
.fa-calendar {
color: white;
}
- If null, then the default calendar icon is used
props.focused
Boolean
- default:
false
- If
true
, the date picker's input field will be focused.
props.locale
String
- default:
en
- Change locale of the moment in the date picker.
props.hideTodayButton
Boolean
- default:
false
- If
true
, the date picker's today button will be hidden.
props.keyboardDisabled
Boolean
- default:
false
- If
true
, the keyboard handler will be disabled
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].