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 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(), ... el 12 dic. 2019 a las 16:50
  • Mas bien modifica la pregunta porque aqui sale recortado el 12 dic. 2019 a las 23:33
  • Listo, espero te sirva y puedas ayudarme. 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 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. el 16 dic. 2019 a las 19:28
  • ah ok, es porque selected lo tienes igual, modifique la respuesta el 16 dic. 2019 a las 19:40
  • ¡Agradecido! Me sirvió. el 16 dic. 2019 a las 20:05
  • podrias marcar la respuesta como aceptada, para marcar que ya se resolvio el 16 dic. 2019 a las 20:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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