werein / React Native Dates
React Native date / daterange picker and calendar
Stars: ✭ 145
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Dates
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+270.34%)
Mutual labels: calendar, datepicker, daterangepicker, daterange
Calendarview
A highly customizable calendar library for Android, powered by RecyclerView.
Stars: ✭ 2,862 (+1873.79%)
Mutual labels: calendar, datepicker, daterangepicker, daterange
Flatpickr
lightweight, powerful javascript datetimepicker with no dependencies
Stars: ✭ 14,575 (+9951.72%)
Mutual labels: datepicker, daterangepicker, daterange
React Dates
React date(range) inputs/pickers
Stars: ✭ 43 (-70.34%)
Mutual labels: datepicker, daterangepicker, daterange
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: ✭ 86 (-40.69%)
Mutual labels: calendar, datepicker, daterange
Vue Functional Calendar
Vue.js Functional Calendar | Component/Package
Stars: ✭ 314 (+116.55%)
Mutual labels: calendar, datepicker, daterange
Litepicker
Date range picker - lightweight, no dependencies
Stars: ✭ 442 (+204.83%)
Mutual labels: datepicker, daterangepicker, daterange
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-76.55%)
Mutual labels: calendar, datepicker
Vue Mj Daterangepicker
🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)
Stars: ✭ 48 (-66.9%)
Mutual labels: datepicker, daterangepicker
React Calendar
React.js Calendar Component (npm install react-calendar-component) 📅
Stars: ✭ 142 (-2.07%)
Mutual labels: calendar, datepicker
Angular Mydatepicker
Angular datepicker and date range picker 📅
Stars: ✭ 76 (-47.59%)
Mutual labels: datepicker, daterangepicker
Rsdayflow
iOS 7+ Calendar (Date Picker) with Infinite Scrolling.
Stars: ✭ 843 (+481.38%)
Mutual labels: calendar, datepicker
Material Vue Daterange Picker
a date-range-picker follows the Material Design spec powered by vue.js (alpha)
Stars: ✭ 64 (-55.86%)
Mutual labels: datepicker, daterangepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-45.52%)
Mutual labels: calendar, datepicker
Laydate
layDate(日期与时间组件) 是 layui 独立维护的三大组件之一
Stars: ✭ 1,066 (+635.17%)
Mutual labels: calendar, datepicker
React Nice Dates
A responsive, touch-friendly, and modular date picker library for React.
Stars: ✭ 924 (+537.24%)
Mutual labels: datepicker, daterangepicker
Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+696.55%)
Mutual labels: calendar, datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-40.69%)
Mutual labels: calendar, datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-41.38%)
Mutual labels: calendar, datepicker
React Native Dates
React Native Date and date range picker / calendar for iOS and Android
API
type DatesType = {
range: boolean,
date: ?moment,
startDate: ?moment,
endDate: ?moment,
focusedInput: 'startDate' | 'endDate',
onDatesChange: (date: { date?: ?moment, startDate?: ?moment, endDate?: ?moment }) => void,
isDateBlocked: (date: moment) => boolean
weekHeader?: {
dayFormat?: string
},
header?: {
renderLeftLabel?: Function,
renderCenterLabel?: moment => void,
renderRightLabel?: Function,
},
hideDifferentMonthDays: boolean
}
Demo
Example
In this example we disabled dates back in history and we shows selected dates bellow
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Dates from 'react-native-dates';
import moment from 'moment';
export default class ReactNativeDatesDemo extends Component {
state = {
date: null,
focus: 'startDate',
startDate: null,
endDate: null
}
render() {
const isDateBlocked = (date) =>
date.isBefore(moment(), 'day');
const onDatesChange = ({ startDate, endDate, focusedInput }) =>
this.setState({ ...this.state, focus: focusedInput }, () =>
this.setState({ ...this.state, startDate, endDate })
);
const onDateChange = ({ date }) =>
this.setState({ ...this.state, date });
return (
<View style={styles.container}>
<Dates
onDatesChange={onDatesChange}
isDateBlocked={isDateBlocked}
startDate={this.state.startDate}
endDate={this.state.endDate}
focusedInput={this.state.focus}
focusedMonth={ moment('05/09/2030','DD/MM/YYYY')}
range
/>
<Dates
date={this.state.date}
onDatesChange={onDateChange}
isDateBlocked={isDateBlocked}
/>
{this.state.date && <Text style={styles.date}>{this.state.date && this.state.date.format('LL')}</Text>}
<Text style={[styles.date, this.state.focus === 'startDate' && styles.focused]}>{this.state.startDate && this.state.startDate.format('LL')}</Text>
<Text style={[styles.date, this.state.focus === 'endDate' && styles.focused]}>{this.state.endDate && this.state.endDate.format('LL')}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexGrow: 1,
marginTop: 20
},
date: {
marginTop: 50
},
focused: {
color: 'blue'
}
});
AppRegistry.registerComponent('ReactNativeDatesDemo', () => ReactNativeDatesDemo);
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].