1

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í

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;
8

1 respuesta 1

0

la versión instalada no era la misma que esta en el package.json, borre los node_modules y los reinstale.

todo esta funcionando bien en la versión 0.18.2 de material ui.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.