Calendar 日历

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

按照日历形式展示数据的容器。

何时使用

日历组件是一个偏向于展示与受控的基础组件，例如日程、课表、价格日历、农历等，如果您在使用上偏向于主动交互，请使用 DatePicker 组件。

类型说明

组件回调函数返回的数据格式为组件内自定义 CalendarDate 对象格式，请注意使用：

CalendarDate = {
    timestamp: Number,  // 时间戳
    year: Number,       // 年
    month: Number,      // 月 0~11
    date: Number,       // 日 1~31
    week: Number        // 周几 1~7
};

注意点

• 如果要使用该组件，请直接使用直接导出的 Calendar 组件。

• Calendar 私有的 DatePickerPanel 和 RangePickerPanel 为组件的私有属性，不对外暴露，建议不要使用。

API

日历

代码示例

基本

一个最简单的日历面板，用户可以切换年/月。

查看源码在线预览

import { Calendar } from "@icedesign/base";
function dateCellRender(calendarDate) {
  const style = {
    position: "absolute",
    width: "calc(100% - 8px)",
    height: "2px",
    textAlign: "center",
    background: "#ff0000",
    top: 0,
    left: 4
  };
  return calendarDate.week > 5 ? (
    <div>
      <span style={style} />
      {calendarDate.date}
    </div>
  ) : (
    <div>{calendarDate.date}</div>
  );
}
ReactDOM.render(<Calendar dateCellRender={dateCellRender} />, mountNode);

卡片模式

包装在有限的容器内

查看源码在线预览

import { Calendar, Select } from "@icedesign/base";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: "zh-cn",
      date: "2017-06-07"
    };
    this.langs = [
      "en-us",
      "ar",
      "de",
      "es",
      "fr",
      "hi",
      "it",
      "ja",
      "ko",
      "pt",
      "ru",
      "zh-cn",
      "zh-hk",
      "zh-tw"
    ];
  }
  onChangeLang(val) {
    this.setState({
      lang: val
    });
  }
  render() {
    const { lang, date } = this.state;
    return (
      <div>
        <Select defaultValue={lang} onChange={this.onChangeLang.bind(this)}>
          {this.langs.map(item => (
            <Select.Option value={item} key={item}>
              {item}
            </Select.Option>
          ))}
        </Select>
        <div className="custom-calendar-guide">
          <Calendar type="card" language={lang} value={date} />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.custom-calendar-guide {
    width: 270px;
    border: 1px solid #C4C6CF;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
}

受控的日历组件

用于日历组件中的日期选择面板

查看源码在线预览

import { Calendar, Select } from "@icedesign/base";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: "zh-cn",
      base: "",
      value: "",
      mode: "month"
    };
    this.langs = [
      "en-us",
      "ar",
      "de",
      "es",
      "fr",
      "hi",
      "it",
      "ja",
      "ko",
      "pt",
      "ru",
      "zh-cn",
      "zh-hk",
      "zh-tw"
    ];
  }
  onChangeLang(val) {
    this.setState({
      lang: val
    });
  }
  onDateChange(nextState) {
    nextState.mode = nextState.mode === "date" ? "month" : nextState.mode;
    this.setState(nextState);
  }
  render() {
    const { lang, base, value, mode } = this.state;
    return (
      <div>
        <Select defaultValue={lang} onChange={this.onChangeLang.bind(this)}>
          {this.langs.map(item => (
            <Select.Option value={item} key={item}>
              {item}
            </Select.Option>
          ))}
        </Select>
        <div className="custom-calendar-guide">
          <Calendar
            type="card"
            language={lang}
            value={value}
            mode={mode}
            base={base}
            onChange={this.onDateChange.bind(this)}
          />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.custom-calendar-guide {
    width: 270px;
    border: 1px solid #C4C6CF;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
}

禁用日期

禁用某些日期

查看源码在线预览

import { Calendar, moment } from "@icedesign/base";
const disabledDate = function(calendarDate) {
  let current = moment()
    .year(calendarDate.year)
    .month(calendarDate.month)
    .date(calendarDate.date);
  return current.valueOf() > moment().valueOf();
};
const wrapperStyle = {
  width: "270px",
  border: "1px solid #C4C6CF",
  borderRadius: "4px",
  overflow: "hidden"
};
ReactDOM.render(
  <div style={wrapperStyle}>
    <Calendar type="card" disabledDate={disabledDate} />
  </div>,
  mountNode
);

自定义语言

用于日历组件中的日期选择面板

查看源码在线预览

import { Calendar } from "@icedesign/base";
const locale = {
  format: {
    months: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月"
    ],
    shortMonths: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月"
    ],
    weekdays: [
      "星期天",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    ],
    shortWeekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    veryShortWeekdays: ["日", "一", "二", "三", "四", "五", "六"],
    ampms: ["上午", "下午"]
  }
};
const wrapperStyle = {
  width: "270px",
  border: "1px solid #C4C6CF",
  borderRadius: "3px",
  overflow: "hidden"
};
ReactDOM.render(
  <div>
    <div style={wrapperStyle}>
      <Calendar type="card" language={"en-us"} locale={locale} />
    </div>
  </div>,
  mountNode
);

相关区块

暂无相关区块