---
name: Datepicker
menu: Components
---

# Datepicker
import Datepicker from './index'
import Button from '../button/index'
import { Playground, Props } from 'docz'
import './style/index.scss'
import './style/v2.scss'
import '../style/docz-reset.scss'



## Props & Methods
<Props of={Datepicker}/>

## Basic Usage
<Playground>
    <Datepicker />
</Playground>

## Placeholder
<Playground>
    <Datepicker
        placeholder={'Click to pick'}
    />
</Playground>

## Set Input Width
<Playground>
    <Datepicker
        placeholder={'Short one'}
    />
    <div style={{height: '10px'}}></div>
    <Datepicker
        placeholder={'Long one'}
        inputWidth={240}
    />
    <div style={{height: '10px'}}></div>
    <Datepicker
        placeholder={'Longer one'}
        inputWidth={300}
    />
</Playground>

## Value
<Playground>
    <Datepicker
        value={new Date()}
    />
</Playground>

## Inline
<Playground>
    <Datepicker
            inline
          />
</Playground>

## Preset Month
<Playground>
    <Datepicker
        placeholder={'Use initMonth to preset the month'}
        initMonth={new Date(2019, 5, 20)}
        inputWidth={350}
    />
</Playground>

## Limit Range
<Playground>
    <Datepicker
        placeholder={'Use minDate and maxDate to limit the available range'}
        inputWidth={480}
        initMonth={new Date(2016, 5, 6)}
        minDate={new Date(2016, 5, 5)}
        maxDate={new Date(2016, 5, 25)}
    />
</Playground>

## Format Date
<Playground>
    <Datepicker
            value={new Date()}
            inputWidth={240}
            dateFormat={'YYYY年MM月DD日'}
          />
</Playground>

## Icon
<Playground>
    <Datepicker
    placeholder={'With Icon'}
    inputWidth={240}
    showIcon
    />
    <span style={{display: 'inline-block', width: '50px',}}></span>
    <Datepicker
    placeholder={'Without Icon'}
    inputWidth={240}
    showIcon={false}
    />
</Playground>

## Mode
<Playground>
    <Datepicker
            placeholder={'Date mode'}
            inputWidth={240}
            mode="date"
          />
    <span style={{display: 'inline-block', width: '50px',}}></span>
    <Datepicker
            placeholder={'Week mode'}
            inputWidth={240}
            mode="week"
            rangeJoin={' 至 '}
          />
    <span style={{display: 'inline-block', width: '50px',}}></span>
    <Datepicker
            placeholder={'Range mode'}
            inputWidth={240}
            mode="range"
            rangeJoin={' 至 '}
          />
</Playground>

## Highlight Dates
<Playground>
    <Datepicker
        inline
        highLightDates={[Date.now(), Date.now() - 24 * 60 * 60 * 1000]}
        onlyEnableHighLightDate
        />
</Playground>

## onChange
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                logArr: [],
            }
            this.handleSelect = this.handleSelect.bind(this);
            this.renderLogs = this.renderLogs.bind(this);
        }
        handleSelect(newDate, oldDate) {
            const logs = [`New Date: ${newDate}`, `Old Date: ${oldDate}`];
            this.setState({
            logArr: logs,
            });
        }
        renderLogs(logArr) {
            return logArr.map((log, index) => {
            return (
                <p
                key={index}
                >
                {log}
                </p>
            );
            });
        }
        render(){
            return <>
                {this.renderLogs(this.state.logArr)}
                <Datepicker
                placeholder={'Pick a date'}
                onChange={this.handleSelect}
                />
            </>
        }
    }
    return <Example />
}}
</Playground>

## onChangeMonth
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                logArr: [],
            }
            this.handleMonthChange = this.handleMonthChange.bind(this);
            this.renderLogs = this.renderLogs.bind(this);
        }
        handleMonthChange(newDate, oldDate) {
            const logs = [`New Month: ${newDate}`, `Old Month: ${oldDate}`];
            this.setState({
            logArr: logs,
            });
        }
        renderLogs(logArr) {
            return logArr.map((log, index) => {
            return (
                <p
                key={index}
                >
                {log}
                </p>
            );
            });
        }
        render(){
            return <>
                {this.renderLogs(this.state.logArr)}
                <Datepicker
                    placeholder={'Change the month'}
                    onChangeMonth={this.handleMonthChange}
                />
            </>
        }
    }
    return <Example />
}}
</Playground>