Write less code, do more things!
首页 指引 文档
指引
文档
基础 更改天数 更改年月 日期格式化

文档

方便预览,添加样式

.demo pre { max-height:400px; overflow-y:auto; }
.demo div { text-align: center; border-bottom: 1px dotted #aaa; line-height: 30px; width: 420px;}
.demo b, .demo i { width: 60px; display: inline-block; }
.demo b, .demo i:hover { background-color: #ccc; cursor:pointer; }
/* 今天显示蓝色 */
.demo--today { background-color: #87aed0; }
/* 上个月 下个月 显示灰色 */
.demo--lastMonth, .demo--nextMonth { background-color: #eee; }
/* 选中日期 显示 红色 */
.demo--on { background-color: #ce7272; }

.demo-tool { position: relative; }
.demo-tool i { min-width: 100px; text-decoration: underline; }
.demo-tool-prev, .demo-tool-next { position: absolute; }
.demo-tool-prev:hover, .demo-tool-next:hover { cursor: pointer; color: purple; }
.demo-tool-prev { left:10px; }
.demo-tool-next { right:10px; }

basic

基础使用

dateLogic.today dateLogic.date dateLogic.startWeekDay dateLogic.weekDayColumn change({date: String})

import {Component} from 'react'
import DateLogic from 'date-logic'
import extend from 'extend'
import cls from 'classnames'

class Basic extends Component {
    constructor(props){
        super(props)
        let self = this
        this.state = {
            date : '' ,
            number: '',
            monthData : []
        }
    }
    componentWillMount(){
        let self = this
        self.dateL = new DateLogic({
            date: '2018-05-10' ,
            startWeekDay:'7',
            onChange: function (data) {
                // data format equal monthData() reutrn
                self.setState({
                    date : data.date ,
                    monthData : extend(true,[],data.render)
                })
            }
        })
    }
    render () {
        let self = this
        let columnTextMap = { '1' : 'Mon', '2' : 'Tue', '3' : 'Wed', '4' : 'Thu', '5' : 'Fri', '6' : 'Sat', '7' : 'Sun' }

        let systemData = {
            today : self.dateL.today,
            date : self.dateL.date,
            startWeekDay : self.dateL.startWeekDay,
            weekDayColumn : self.dateL.weekDayColumn,
        }
        return (
            <div className="basicDemo demo" >
                <div></div>
                <pre>
                    {JSON.stringify(systemData, null, 4)}
                </pre>
                self.state.monthData = 
                <pre>
                    {JSON.stringify(self.state.monthData, null, 4)}
                </pre>
                <div>
                    {
                        self.dateL.weekDayColumn.map(function(item,index){
                            return (
                                <b key={index} >{columnTextMap[item]}</b>
                            )
                        })
                    }
                </div>
                <div>
                    {
                        self.state.monthData.map(function(item,index){
                            return (
                                <i  key={index}
                                    className={cls({
                                        'demo--lastMonth' : item.lastMonth ,
                                        'demo--nextMonth' : item.nextMonth ,
                                        'demo--today' : item.today ,
                                        'demo--on' : item.date == self.state.date
                                    })}
                                    onClick={function(){
                                        self.dateL.change({
                                            date : item.date
                                        })
                                    }}
                                >{item.day}</i>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}


module.exports = Basic

changeDays

ChangeDays

changeDays(Number)

import DateLogic from 'date-logic';
import extend from 'extend';
import { Component } from 'react';
import cls from 'classnames';


class ChangeDays extends Component {
    constructor(props) {
        super(props)
        let self = this
        this.state = {
            date : '' ,
            number: 2 ,
            monthData : []
        }

    }
    componentWillMount(){
        let self = this
        self.dateL = new DateLogic({
            date: '2018-05-18' ,
            startWeekDay:'3',
            onChange: function (data) {
                // data format equal monthData() reutrn
                self.setState({
                    date : data.date ,
                    monthData : extend(true,[],data.render)
                })
            }
        })
    }
    render() {
        var self = this
        let columnTextMap = { '1' : 'Mon', '2' : 'Tue', '3' : 'Wed', '4' : 'Thu', '5' : 'Fri', '6' : 'Sat', '7' : 'Sun' }

        return (
            <div className="changeDaysDemo demo">
                <div>
                    changeDays :
                    <input  
                        value={self.state.number}
                        onChange={function(e){
                            // 简单限制只能输入数字
                            e.target.value = Number( e.target.value.replace(/[^\d]+/g,'').toString() )
                            self.setState({
                                number : e.target.value
                            })
                        }}
                    />
                    天
                    <br/>
                    <button onClick={function(e){
                                    if(!self.state.number){ return false }
                                    self.dateL.changeDays(self.state.number)
                                    self.setState({
                                        date : self.dateL.date ,
                                    })
                                }}
                        >{'+'+self.state.number+'天'}</button>
                    <button onClick={function(e){
                                    if(!self.state.number){ return false }
                                    self.dateL.changeDays( Number('-'+self.state.number) )
                                    self.setState({
                                        date : self.dateL.date ,
                                    })
                                }}
                        >{'-'+self.state.number+'天'}</button>
                </div>
                <div>
                    <span className="changeDays-tool-text" >
                        {
                            self.dateL.toFormat({
                                in:'YYYY-MM-DD',
                                date:self.dateL.date,
                                output:'YYYY年MM月DD日'
                            })
                        }
                    </span>
                </div>
                <div>
                    {
                        self.dateL.weekDayColumn.map(function(item,index){
                            return (
                                <b key={index} >{columnTextMap[item]}</b>
                            )
                        })
                    }
                </div>
                <div>
                    {
                        self.state.monthData.map(function(item,index){
                            return (
                                <i  key={index}
                                    className={cls({
                                        'demo--lastMonth' : item.lastMonth ,
                                        'demo--nextMonth' : item.nextMonth ,
                                        'demo--today' : item.today ,
                                        'demo--on' : item.date == self.state.date
                                    })}
                                >{item.day}</i>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}



module.exports = ChangeDays

changeMonth or changeYear

MonthYear

lastMonth() nextMonth() lastYear() nextYear()

import {Component} from 'react'
import DateLogic from 'date-logic'
import extend from 'extend'
import cls from 'classnames'

class MonthYear extends Component {
    constructor(props) {
        super(props)
        this.state = {
            monthData: []
        }
    }
    componentWillMount(){
        let self = this
        self.list = new DateLogic({
            date: '2017-09-16',
            startWeekDay:'3',
            onChange: function (data) {
                // console.log('onChange : ',data)
                self.setState({
                    monthData : extend(true,[],data.render)
                })
            }
        })
    }
    render() {
        var self = this
        let columnTextMap = { '1' : 'Mon', '2' : 'Tue', '3' : 'Wed', '4' : 'Thu', '5' : 'Fri', '6' : 'Sat', '7' : 'Sun' }
        return (
            <div className="monthYearDemo demo">
                <div className="demo-tool">
                    <i className="demo-tool-prev"
                        onClick={function(){
                            self.list.lastYear()
                        }}
                    >lastYear</i>
                    <i className="demo-tool-next"
                        onClick={function(){
                            self.list.nextYear()
                        }}
                    >nextYear</i>
                    <b className="demo-tool-text" >
                        {self.list.toFormat({
                            in:'YYYY-MM-DD',
                            date:self.list.date,
                            output:'YYYY年'
                        })}
                    </b>
                </div>
                <div className="demo-tool">
                    <i className="demo-tool-prev"
                        onClick={function(){
                            self.list.lastMonth()
                        }}
                    >lastMonth</i>
                    <i className="demo-tool-next"
                        onClick={function(){
                            self.list.nextMonth()
                        }}
                    >nextMonth</i>
                    <b className="demo-tool-text" >
                        {self.list.toFormat({
                            in:'YYYY-MM-DD',
                            date:self.list.date,
                            output:'MM月'
                        })}
                    </b>
                </div>
                <div>
                    {
                        self.list.weekDayColumn.map(function(item,index){
                            return (
                                <b key={index} >{columnTextMap[item]}</b>
                            )
                        })
                    }
                </div>
                <div>
                    {
                        self.state.monthData.map(function(item,index){
                            return (
                                <i  key={index}
                                    className={cls({
                                        'demo--lastMonth' : item.lastMonth ,
                                        'demo--nextMonth' : item.nextMonth ,
                                        'demo--today' : item.today ,
                                    })}
                                >{item.day}</i>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}


module.exports = MonthYear

format

  • 日期字符串 转 日期字符串 toFormat({in:inFormatString, date:dateString, output:outputFormatString)
  • 日期对象 转 日期字符串 dateToStr(dateObject, formatString)
  • 日期字符串 转 日期对象 strToDate(dateString, formatString)
Format

可打开控制台查看打印数据

import {Component} from 'react'
import DateLogic from 'date-logic'
import extend from 'extend'
import cls from 'classnames'

class Basic extends Component {
    constructor(props){
        super(props)
        let self = this
        this.state = {
            date : '' ,
            number: '',
            monthData : []
        }
    }
    componentWillMount(){
        let self = this
        self.dateL = new DateLogic({
            format: 'YYYY年MM月DD日', // 默认输出日期格式
            date: '2008年02月16日', // 保持与默认格式一致
        })
    }
    render () {
        let self = this
        let systemData = {
            today : self.dateL.today,
            date : self.dateL.date,
        }

        let formatResult = self.dateL.toFormat({
                                in:'YYYY年MM月DD日',
                                date:'1999年02月16日',
                                output:'YYYY--公元年--MM--DD'
                            })
        let dateToStr = self.dateL.dateToStr(new Date('1200-12-12') , 'YYYY+MM_DD')
        let strToDate = self.dateL.strToDate( '1560/3/2' , 'YYYY/MM/DD' )
        console.group('formatDemo')
            console.log('formatResult',formatResult)
            console.log('dateToStr',dateToStr)
            console.log('strToDate',strToDate)
        console.groupEnd()

        return (
            <div className="formatDemo demo" >
                根据配置默认输出格式
                <pre>
例: self.dateL = new DateLogic({`
    format: 'YYYY年MM月DD日', 
    date: '2008年02月16日',
`})
                </pre>
                =>
                <pre>
                    self.dateL.today : {self.dateL.today} <br/>
                    self.dateL.date : {self.dateL.date}
                </pre>
                <hr/>

                <pre>
例: self.dateL.toFormat({`
    in:'YYYY年MM月DD日',
    date:'1999年02月16日',
    output:'YYYY--公元年--MM--DD'
`})
                </pre>
                =>
                <pre>{formatResult}</pre>
                <hr/>

                <pre>{`例: self.dateL.dateToStr(new Date('1200-12-12') , 'YYYY+MM_DD')`}</pre>
                =>
                <pre>{dateToStr}</pre>
                <hr/>

                <pre>{`例: String(self.dateL.strToDate( '1560/3/2' , 'YYYY/MM/DD' ))`}</pre>
                =>
                <pre>{String(strToDate)}</pre>
            </div>
        )
    }
}


module.exports = Basic
Github
date-logic - 项目源码
相关站点
component-spec - 组件规范
module - 开源项目脚手架
onface.cc - 资源集合
社区
Github issues
提交bug