Giter VIP home page Giter VIP logo

calendar's Introduction

rc-calendar

React Calendar

NPM version build status Test coverage gemnasium deps npm download Code Quality: Javascript Total alerts

Screenshots

Feature

  • support ie9,ie9+,chrome,firefox,safari
  • support date, month, year, decade select panel
  • support week number
  • support en_US and zh_CN locale(UI), use moment.utcOffset to set timezone
  • support aria and keyboard accessibility

Keyboard

  • Previous month (PageUp)
  • Next month (PageDown)
  • tab into hour input: Last hour(Up), Next hour(Down)
  • tab into hour input: Last minute(Up), Next minute(Down)
  • tab into hour input: Last second(Up), Next second(Down)
  • Last year (Control + left)
  • Next year (Control + right)

install

rc-calendar

Usage

import Calendar from 'rc-calendar';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Calendar />, container);

Development

npm install
npm start

Example

http://localhost:8002/examples/

online example:

http://react-component.github.io/calendar/examples/index.html

API

rc-calendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
dateRender (current, value) => React.Node date cell
renderSidebar () => React.Node side bar
renderFooter (mode) => React.Node extra footer
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
format String | String[] depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display.
disabledDate Function(current:moment):Boolean whether to disable select of current date
disabledTime Function(current:moment):Object a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker
showDateInput Boolean true whether to show input on top of calendar panel
showWeekNumber Boolean false whether to show week number of year
showToday Boolean true whether to show today button
showOk Boolean auto whether has ok button in footer
timePicker React Element rc-timer-picker/lib/module/panel element
onSelect Function(date: moment) called when a date is selected from calendar
onClear Function() called when a date is cleared from calendar
onChange Function(date: moment) called when a date is changed inside calendar (next year/next month/keyboard)
onOk Function(date: moment) called when ok button is pressed, only if it's visible
dateInputPlaceholder String date input's placeholder
mode enum('time', 'date', 'month', 'year', 'decade') 'date' control which kind of panel should be shown
onPanelChange Function(date: moment, mode) called when panel changed
clearIcon ReactNode specific the clear icon.
inputMode string text Change the keyboard in mobile device

rc-calendar/lib/RangeCalendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
renderSidebar () => React.Node side bar
renderFooter () => React.Node extra footer
selectedValue moment[] current selected value range. with two elements.
defaultSelectedValue moment[] default selected value range
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
format String depends on whether you set timePicker and your locale use to format/parse date(without time) value to/from input
disabledDate Function(current:moment):Boolean whether to disable select of current date
showWeekNumber Boolean false whether to show week number of year
showToday Boolean true whether to show today button
showOk Boolean auto whether has ok button in footer
showClear Boolean false whether has clear button in header
timePicker React Element rc-timer-picker/lib/module/panel element
onSelect Function(date: moment[]) called when a date range is selected from calendar
onInputSelect Function(date: moment[]) called when a valid date entered in input
onClear Function() called when a date range is cleared from calendar
onChange Function(date: moment[]) called when a date range is changed inside calendar (next year/next month/keyboard)
onOk Function(date: moment) called when ok button is pressed, only if it's visible
dateInputPlaceholder String[] range date input's placeholders
disabledTime Function(current: moment[], type:'start'|'end'):Object a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker
showDateInput Boolean true whether to show date inputs on top of calendar panels
type enum('both','start', 'end') both whether fix start or end selected value. check start-end-range example
mode enum('date', 'month', 'year', 'decade')[] ['date', 'date'] control which kind of panels should be shown
onPanelChange Function(date: moment[], mode) called when panels changed
hoverValue moment[] control hover value
onHoverChange Function(hoverValue: moment[]) called when hover value change
clearIcon ReactNode specific the clear icon.

rc-calendar/lib/MonthCalendar props

name type default description
prefixCls String prefixCls of this component
className String additional css class of root dom node
style Object additional style of root dom node
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
locale Object import from 'rc-calendar/lib/locale/en_US' calendar locale
disabledDate Function(current:moment):Boolean whether to disable select of current month
onSelect Function(date: moment) called when a date is selected from calendar
monthCellRender function Custom month cell render method
monthCellContentRender function Custom month cell content render method,the content will be appended to the cell.
onChange Function(date: moment) called when a date is changed inside calendar (next year/next month/keyboard)
renderFooter () => React.Node extra footer

rc-calendar/lib/Picker props

name type default description
prefixCls String prefixCls of this component
calendar Calendar React Element
disabled Boolean whether picker is disabled
placement String|Object one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
align Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align) value will be merged into placement's align config.
animation String index.css support 'slide-up'
transitionName String css class for animation
value moment|moment[] current value like input's value
defaultValue moment|moment[] defaultValue like input's defaultValue
onChange Function called when select a different value
onOpenChange (open:boolean) => void called when open/close picker
open Boolean current open state of picker. controlled prop
getCalendarContainer () => HTMLElement () => {return document.body;} dom node where calendar to be rendered into
dropdownClassName string additional className applied to dropdown

rc-calendar/lib/FullCalendar props

name type default description
prefixCls String prefixCls of this component
Select React Component Class rc-select Component Class
value moment current value like input's value
defaultValue moment defaultValue like input's defaultValue
defaultType string date default panel type: date/month
type string panel type: date/month
onTypeChange function(type) called when panel type change
fullscreen bool false
monthCellRender function Custom month cell render method
dateCellRender function Custom date cell render method
monthCellContentRender function Custom month cell content render method,the content will be appended to the cell.
dateCellContentRender function Custom date cell content render method,the content will be appended to the cell.
onSelect Function(date: moment) called when a date is selected from calendar

Test Case

npm test

Coverage

npm run coverage

open coverage/ dir

License

rc-calendar is released under the MIT license.

calendar's People

Contributors

aaronplanell avatar afc163 avatar alpolishchuk avatar benjycui avatar chenshuai2144 avatar chentony avatar coderpawz avatar dependabot-preview[bot] avatar dependabot-support avatar dmitriyk1 avatar jnelson180 avatar kamahl19 avatar kirbo avatar manumaticx avatar muratayusuke avatar onlyann avatar paranoidjk avatar paunovic-stefan avatar plandem avatar popomore avatar raohai avatar susiwen8 avatar tryingtoimprove avatar ukyiwin avatar wuhaixing avatar xeodou avatar yesmeck avatar yiminghe avatar ynunokawa avatar zombiej avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

hustxiaoc popomore artemzi bok95 azu hui ustccjw xeodou proclamo-zz idream3 dbachko dongtong vebin bernardstanislas stonelee emotional-engineering afc163 duoduoin chentony tylerlh index01d lambder morejs shane13hsi llw demojin keithlee208 wuhaixing foysavas heymancn jmsherry fedevitch me6iaton blackpuppy loganfreeman hamiarcher jensxu paseo licanbluesea steffenmllr helloaihao ritsuyan evencom piotrlewandowski raohai vyadav12 lllleeo cookkkie miskreant kunal-mandalia cathyzoller hkwu sonhgc00016 akihiroxob mse-chouketsu nukosuke mrzepinski dulumao ruanhaojian joshvar88 manumaticx obruni misssweety cong876 qubaomingg wyxy2005 lpasslack mocha-xsy sweetfairy naruas mrhuisjeff wufeng87 daniloarantes tryingtoimprove karelzoha opr diegourban nielinying nidayecc aohua tedyhy mikafima brdonsb joneyphair digideskio rosenblad xiaodc grimor marlonfan ngsun78 mdedetrich billgloff stevenxue haydnhkim bartekbp lichking1201 superjolly bokzor zaynex corneyl

calendar's Issues

support prefixCls 

<Calendar prefixCls='x' />

render

<div class='x'><div class='x-header'></div></div>

add trigger prop for Picker 

<DatePicker trigger={<span className='picker-icon'/>}>
<input />
</DatePicker>

render

<span class='rc-calendar-picker'>
<input/>
<span className='picker-icon'></span>
</span>

Setting showToday to false breaks render

So rendering:

<Calendar showToday={false} />

Gives:

Uncaught Error: Invariant Violation: CalendarFooter.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Appears in the CalendarFooter.render() method the returned footerEl element is created inside:

if (props.showToday || props.showTime) {}

So if both are false it returns undefined, moving the footerEl creation statement outside the if seems to fix it.

picker 的 onChange 触发时机问题

目前是和 Calendar 的 onChange 触发时机一致。

是否应该是，浮层 blur 消失、或点了 ok 按钮把值赋到 trigger 上时才触发？

add DatePicker 

<DatePicker ref='picker' formatter={this.props.formatter} calendar={calendar}  value={state.value}>
  <input type="text" className="form-control"/>
</DatePicker>
var React = require('react');
var Calendar = require('../');
var DatePicker = Calendar.Picker;
var zhCn = require('gregorian-calendar/lib/locale/zh-cn'); 
var DateTimeFormat = require('gregorian-calendar-format');
var GregorianCalendar = require('gregorian-calendar');
var CalendarLocale = require('../lib/locale/zh-cn');

var Test = React.createClass({
  open: function () {
    this.refs.picker.setState({
      open: true
    });
  },

  handleCalendarSelect: function (v) {
    //console.log('outer knows: ' + this.props.formatter.format(v));
    // sync status
    this.setState({
      value: v
    });
  },

  getDefaultProps: function () {
    return {
      formatter: new DateTimeFormat('yyyy-MM-dd HH:mm:ss', zhCn)
    }
  },

  getInitialState: function () {
    var value = new GregorianCalendar(zhCn);
    value.setTime(Date.now());
    return {
      showTime:true,
      value: value
    };
  },

  handleShowTimeChange:function(e){
    this.setState({
      showTime:e.target.checked
    });
  },

  render: function () {
    var state = this.state;
    var calendar = <Calendar locale={CalendarLocale}
    orient={['bottom','left']}
    showTime={this.state.showTime} onSelect={this.handleCalendarSelect}/>;
    return  <div className="form-group">
        <div className="input-group">
         <span><input type='checkbox' checked={this.state.showTime} onChange={this.handleShowTimeChange} /> showTime</span>
         </div>
        <div className="input-group">
          <DatePicker ref='picker' formatter={this.props.formatter} calendar={calendar}  value={state.value}>
            <input type="text" className="form-control" style={{background:'white',cursor:'pointer'}}/>
          </DatePicker>
          <span className="input-group-addon" onClick={this.open}>
            <span className="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>;
  }
});

两个 DatePicker 获取属性的问题

image
我现在有两个 <DatePicker /> 的组件，我现在想在 handleDateChange 方法里获取到 DatePicker 的 name 属性，有什么好的方法获取么？我现在比较龊的用了 this.handleDateChange.bind(this, 'startTime', value) 。。

release 1.2.4

  • support ie8,ie8+,chrome,firefox,safari
  • support date, month, year, decade select panel
  • support week number
  • support en-us and zh-cn locale (ui and timeOffset)
  • support aria and keyboard accessibility

React throws TypeError when clicking on Datepicker

I've nested the Datepicker component in a parent component. When clicking the datepicker, React throws this error:

Uncaught TypeError: Cannot read property 'firstChild' of undefined

I figured maybe I was incorrectly setting up my component, so I replaced my component with the component defined in the first example for rc-calendar, but found the issue still persisted. Clicking on Datepicker still throws this same error.
http://react-component.github.io/calendar/build/examples/ant-design-picker.html

The discussion on StackOverflow suggests that this error is caused by having 2 mismatched versions of React inside of a nested node-modules directory. However, this does not appear to be the case with the rc-calendar module.

support defaultValue

  • controlled calendar/date-picker: use value prop
  • uncontrolled calendar/date-picker: use defaultValue

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.