Skip to content

README-zh_CN.md

Latest commit

 

History

History
176 lines (140 loc) · 4.07 KB

README-zh_CN.md

File metadata and controls

176 lines (140 loc) · 4.07 KB

Clendar Demo

npm npm GitHub license

README in English
  • 原生 js 开发、不依赖任何框架和库的轻量级移动端数字键盘
  • API 简洁，非常好上手

example

属性

Property Type Default Description
el DOM - 日历父节点
currentDate String today(yyyy/MM/dd) 当前日期
format String yyyy/MM/dd 日期格式
monthFormat String yyyy年MM月 月份格式
onDayClick Function - 点击日期时触发
onClickPreMonth Function - 点击箭头去上一个月时触发
onClickNextMonth Function - 点击箭头去下一个月时触发
onMonthChange Function - 月份改变时触发

开始上手

使用示例

yarn add calendar-lite --dev

使用示例

  • Native JavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="author" content="simbawu" />
    <title>calendar</title>
  </head>
  <body>
    <div id="values"></div>
    <div id="app"></div>
    <script src="./calendar.js"></script>
  </body>
</html>
//calendar.js
import Calendar from "calendar-lite";

function onDayClick(date) {
  console.log(date); // choose date
}

new Calendar({
  el: document.querySelector("#app"),
  currentDate: "2019/08/28",
  onDayClick
});
  • React
import React from "react";
import Calendar from "calendar-lite";

class CalendarPage extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.renderCalendar();
  }

  onDayClick = date => {
    console.log(date); // choose date
  };

  renderCalendar = () => {
    return new Calendar({
      el: this.refs.slideRuler,
      currentDate: "2019/08/28",
      onDayClick: this.onDayClick
    });
  };

  render() {
    return <div ref="slideRuler" />;
  }
}

export default CalendarPage;
  • Vue
<template>
  <div></div>
</template>
<script>
import Calendar from 'calendar-lite';
export default {
  mounted () {
    this.renderCalendar();
  },
  methods: () {
    renderCalendar() {
    	return new Calendar (
        {
          el: this.$el,
          currentDate: "2019/08/28",
          onDayClick: onDayClick
        }
      );
    },

    onDayClick(date) {
      console.log(date); // choose date
    }
  }
}
</script>
  • Angular
import { Component, ViewChild, OnInit, ViewEncapsulation } from "@angular/core";
import Calendar from "calendar-lite";

@Component({
  selector: "my-app",
  template: `
    <div #calendar></div>
  `,
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  @ViewChild("calendar") calendar;

  ngOnInit() {
    this.renderCalendar();
  }

  renderCalendar() {
    return new Calendar({
      el: this.calendar.nativeElement,
      currentDate: "2019/08/28",
      onDayClick: onDayClick
    });
  }

  onDayClick(date) {
    console.log(date); // choose date
  }
}

如何贡献

欢迎每个人为这个项目做出贡献。可以从查看我们未解决的问题,提交新问题 或提出新功能, 入手，参与讨论投票您喜欢或不喜欢的问题。

开源证书

The MIT License.