Skip to main content
se añadieron 3824 caracteres en el cuerpo
Origen Enlace
wootsbot
  • 361
  • 3
  • 24
import _ from 'lodash';
import React from 'react';
import DatePicker from 'material-ui/DatePicker';
import moment from 'moment';

const VISIBLE_DATE_FORMAT = 'DD/MM/YYYY';
const API_DATE_FORMAT = 'YYYY-MM-DD';

const DEFAULT_DATE_FORMATTER = function (date){
    // IMPORTANT: this change is only functional for [email protected]
    // else all dates will add one the display date
    return moment.utc(date).format(VISIBLE_DATE_FORMAT);
}

const PROP_TYPES = {
    show : React.PropTypes.bool,
    valueLink : React.PropTypes.object,
    onChange : React.PropTypes.func,
    value : React.PropTypes.any,
    style : React.PropTypes.object
}


const PROP_TYPE_KEYS = _.keys(PROP_TYPES);

let GenericDatepicker = React.createClass({

    propTypes : PROP_TYPES,

    /* React methods */

    getDefaultProps(){
        return {
            show : true,
            DateTimeFormat : window.Intl.DateTimeFormat,
            formatDate : DEFAULT_DATE_FORMATTER,
            locale :  'es-MX',
            className : 'date-picker-input',
            mode : 'landscape',
            okLabel : 'ACEPTAR',
            cancelLabel : 'CANCELAR'
        }
    },

    getInitialState(){
        return {
            value : null
        }
    },

    componentWillReceiveProps(nextProps){

        let value = this._getNormalizedValue(nextProps);
        this.setState({ value : value });

    },

    /* Private methods */

    _stringToDate(value){

        value = moment(value, API_DATE_FORMAT);

        if(value.isValid()){

            // Convert from API format to date
            return value.toDate();
        }

        return null;
    },

    _dateToString(value){

        // Return null if not value
        if(!value){
            return null;
        }

        value = moment(value);

        if(value.isValid()){

            // Convert from API format to date
            return value.format(API_DATE_FORMAT);
        }

        return null;
    },

    /*
        Avoid use of valueLink and use handled component instead
    */

    _onChange(e, newDate){

        let stringDate = this._dateToString(newDate);

        if(this.props.valueLink){
            this.props.valueLink.requestChange(stringDate);
        }else if(this.props.onChange){
            this.props.onChange(stringDate);
        }

        this.setState({
            value : newDate
        });

    },

    // Takes value from either "value" or "valueLink" props
    _getNormalizedValue(props = this.props){

        let value = props.value;

        if(props.valueLink){
            value = props.valueLink.value;
        }

        return this._stringToDate(value);
    },

    /* Public methods */

    setValue(value){

        value = this._stringToDate(value);

        // Do nothing if value is null
        if(!value){
            return;
        }

        this.setState({ value : value });

    },

    getValue(){
        return this._dateToString(this.state.value);
    },

    render(){

        // Extend previous styles with the display property
        let styles = {
            height : '72px',
            marginRight : '1em',
            ...this.props.style,
            display : (this.props.show) ? 'inline-block' : 'none'
        }

        // Avoid passing wrong props to nested component
        let other = _.omit(this.props, PROP_TYPE_KEYS);

        return (
            <DatePicker
                value={this.state.value}
                onChange={this._onChange}
                style={styles}
                {...other}
            />
        );
    }


});

export default GenericDatepicker;
import _ from 'lodash';
import React from 'react';
import DatePicker from 'material-ui/DatePicker';
import moment from 'moment';

const VISIBLE_DATE_FORMAT = 'DD/MM/YYYY';
const API_DATE_FORMAT = 'YYYY-MM-DD';

const DEFAULT_DATE_FORMATTER = function (date){
    // IMPORTANT: this change is only functional for [email protected]
    // else all dates will add one the display date
    return moment.utc(date).format(VISIBLE_DATE_FORMAT);
}

const PROP_TYPES = {
    show : React.PropTypes.bool,
    valueLink : React.PropTypes.object,
    onChange : React.PropTypes.func,
    value : React.PropTypes.any,
    style : React.PropTypes.object
}


const PROP_TYPE_KEYS = _.keys(PROP_TYPES);

let GenericDatepicker = React.createClass({

    propTypes : PROP_TYPES,

    /* React methods */

    getDefaultProps(){
        return {
            show : true,
            DateTimeFormat : window.Intl.DateTimeFormat,
            formatDate : DEFAULT_DATE_FORMATTER,
            locale :  'es-MX',
            className : 'date-picker-input',
            mode : 'landscape',
            okLabel : 'ACEPTAR',
            cancelLabel : 'CANCELAR'
        }
    },

    getInitialState(){
        return {
            value : null
        }
    },

    componentWillReceiveProps(nextProps){

        let value = this._getNormalizedValue(nextProps);
        this.setState({ value : value });

    },

    /* Private methods */

    _stringToDate(value){

        value = moment(value, API_DATE_FORMAT);

        if(value.isValid()){

            // Convert from API format to date
            return value.toDate();
        }

        return null;
    },

    _dateToString(value){

        // Return null if not value
        if(!value){
            return null;
        }

        value = moment(value);

        if(value.isValid()){

            // Convert from API format to date
            return value.format(API_DATE_FORMAT);
        }

        return null;
    },

    /*
        Avoid use of valueLink and use handled component instead
    */

    _onChange(e, newDate){

        let stringDate = this._dateToString(newDate);

        if(this.props.valueLink){
            this.props.valueLink.requestChange(stringDate);
        }else if(this.props.onChange){
            this.props.onChange(stringDate);
        }

        this.setState({
            value : newDate
        });

    },

    // Takes value from either "value" or "valueLink" props
    _getNormalizedValue(props = this.props){

        let value = props.value;

        if(props.valueLink){
            value = props.valueLink.value;
        }

        return this._stringToDate(value);
    },

    /* Public methods */

    setValue(value){

        value = this._stringToDate(value);

        // Do nothing if value is null
        if(!value){
            return;
        }

        this.setState({ value : value });

    },

    getValue(){
        return this._dateToString(this.state.value);
    },

    render(){

        // Extend previous styles with the display property
        let styles = {
            height : '72px',
            marginRight : '1em',
            ...this.props.style,
            display : (this.props.show) ? 'inline-block' : 'none'
        }

        // Avoid passing wrong props to nested component
        let other = _.omit(this.props, PROP_TYPE_KEYS);

        return (
            <DatePicker
                value={this.state.value}
                onChange={this._onChange}
                style={styles}
                {...other}
            />
        );
    }


});

export default GenericDatepicker;
Origen Enlace
wootsbot
  • 361
  • 3
  • 24

Material ui DatePicker suma un dia

al seleccionar una fecha en el rango de 1924 siempre me suma un día. material-ui : 0.18.2 react : 15.4.1

introducir la descripción de la imagen aquí