2021SC@SDUSC amis代码分析(1)

2021SC@SDUSC

概述

本周，我主要阅读和分析了calendar部分的代码。代码目录如下：

主要实现的不同功能组件包括：

• 日期选择器
• 日期时间选择器
• 日期范围选择器
• 日期时间范围选择器
• 月份选择器

amis提供了非常完备的通过json生成日期选择器的组件API，可通过参数进行自定义配置，实现强大的功能。

示例

{
   
  "type": "page",
  "body": {
   
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
      {
   
        "type": "input-date",
        "name": "date",
        "label": "日期"
      }
    ]
  }
}

效果

代码分析

Year|Month 选择的实现

如下图所示：


选择年份和月份的基本逻辑是一样的，代码结构也很类似。以下，我使用月份选择的代码进行分析：

MonthsView.js

该文件使用create-react-class创建了基本月份选择的react组件模板

'use strict';

var React = require('react'),
	createClass = require('create-react-class')
;

// 使用 React.createElement创建基本 react 页面标签
var DateTimePickerMonths = createClass({
   
	render: function() {
   
		return React.createElement('div', {
    className: 'rdtMonths' }, [
			React.createElement('table', {
    key: 'a' }, React.createElement('thead', {
   }, React.createElement('tr', {
   }, [
			    // 前一个月
				React.createElement('th', {
    key: 'prev', className: 'rdtPrev', onClick: this.props.subtractTime( 1, 'years' )}, React.createElement('span', {
   }, '‹' )),
				// 当前月份
				React.createElement('th', {
    key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
				// 后一个月
				React.createElement('th', {
    key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {
   }, '›' ))
			]))),
			React.createElement('table', {
    key: 'months' }, React.createElement('tbody', {
    key: 'b' }, this.renderMonths()))
		]);
	},

	renderMonths: function() {
   
		// viewDate 是来自父组件的 moment.Moment 对象
		var date = this.props.selectedDate, //选择的日期
			month = this.props.viewDate.month(),//当前月份
			year = this.props.viewDate.year(),//当前年份
			rows = [],
			i = 0,//所选择的月份
			months = [],
			renderer = this.props.renderMonth || this.renderMonth,
			isValid = this.props.isValidDate || this.alwaysValidDate,
			classes, props, currentMonth, isDisabled, noOfDaysInMonth, daysInMonth, validDay,
			// 日期无关紧要，因为我们只对月份感兴趣
			irrelevantDate = 1
			;

		while (i < 12) {
   
			classes = 'rdtMonth';
			// 克隆 viewDate 并根据 i 的值更改状态
			currentMonth =
				this.props.viewDate.clone().set({
    year: year, month: i, date: irrelevantDate });
			// 获取该月的结束时间
			noOfDaysInMonth = currentMonth.endOf( 'month' ).