1

tengo un DatePicker para seleccionar fechas y agendar, pero no quiero que me mantenga seleccionado el día actual. Sino que seleccione a partir del día siguiente.

Código:

<FormGroup>
    <DatePicker
    dateFormat="dd/MM/yyyy"
    locale={es}
    inline
    name="firstDate"
    minDate={new Date()}
    selected={this.state.firstDate}
    onChange={(e) => this.selectDate(e, 'firstDate')}
    className="form-control"/>
</FormGroup>

El componente DatePicker lo saco de acá:

class Booking extends Component {
    constructor(props) {
         super(props);
         this.state = {
             ...
             dateSelector: "1",
             initialDate: new Date(),
             firstDate: new Date(),
             secondDate: new Date(),
             thirdDate: new Date(),
             ...
         }
     }
 }

Gracias

6
  • Deberias adjuntar de donde estas sacando ese componente DatePicker Commented el 11 dic. 2019 a las 20:46
  • class Booking extends Component { constructor(props) { super(props); this.state = { ... dateSelector: "1", initialDate: new Date(), firstDate: new Date(), secondDate: new Date(), thirdDate: new Date(), ... Commented el 12 dic. 2019 a las 16:50
  • Mas bien modifica la pregunta porque aqui sale recortado Commented el 12 dic. 2019 a las 23:33
  • Listo, espero te sirva y puedas ayudarme. Commented el 13 dic. 2019 a las 12:42
  • En el codigo que añadiste a la pregunta todavia no sale nada del datepicker, por ejemplo podrias decirme que libreria estas usando para el datepicker, por ejemplo import Datepicker from '....' ahi ya podria darme una idea de que libreria estas usando Commented el 13 dic. 2019 a las 19:22

1 respuesta 1

0

Te recomiendo usar moment para manejar las fechas, lo hace muy facil

Para instalarlo debes escribir esto en la consola

npm install moment --save

En el archivo donde tienes el componente agregas esto hasta arriba

import moment from 'moment'

Y modificas lo que pusiste en minDate por una funcion de moment

this.state = {
  ...
  dateSelector: "1",
  initialDate: new Date(),
  firstDate: moment().add(1, 'day').toDate(),
  secondDate: new Date(),
  thirdDate: new Date(),
  ...
}

<FormGroup>
    <DatePicker
    dateFormat="dd/MM/yyyy"
    locale={es}
    inline
    name="firstDate"
    minDate={moment().add(1, 'day').toDate()}
    selected={this.state.firstDate}
    onChange={(e) => this.selectDate(e, 'firstDate')}
    className="form-control"/>
</FormGroup>
4
  • Sigue dejándolo seleccionado predeterminado. Y es lo que no quiero, porque igual escogerían ese día. Commented el 16 dic. 2019 a las 19:28
  • ah ok, es porque selected lo tienes igual, modifique la respuesta Commented el 16 dic. 2019 a las 19:40
  • ¡Agradecido! Me sirvió. Commented el 16 dic. 2019 a las 20:05
  • podrias marcar la respuesta como aceptada, para marcar que ya se resolvio Commented el 16 dic. 2019 a las 20:08

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.