1
votes

L'heure du sélecteur de date et d'heure de conception de fourmi de réaction n'est pas mise à jour

J'utilise mon projet react pour sélecteur de date et d'heure ant design 3 , je veux savoir comment afficher lorsque vous sélectionnez la date de cassis avec l'heure

ici le conflit

Sélectionnez d'abord la date future et l'heure 8 h ou 7 h, puis à nouveau cliquez sur sélectionner la date et choisissez la date du jour, lorsque je clique la 1ère fois date future et 7 ou 8h. cette heure s'affiche avec la date du jour, car je suis désactivé le passé avec la date d'aujourd'hui, c'est un problème, vous pouvez vérifier

Quelqu'un connaît la solution?

stack blitz ici

 description de l'image ici

partie de code ici strong>

   class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      date: new Date()
    };
  }
//date disable
    disabledDate(current: any) {
        // Can not select days before today and today
        //return current && current < moment().endOf('day');
        return current && current < moment().startOf("day")
    }

    //time disable
    getDisabledHours() {
        var hours = [];
        for (let i = 0; i < moment().hour(); i++) {
            hours.push(i);
        }
        return hours;
    }

    //time disable
    getDisabledMinutes = (selectedHour: any) => {
        var minutes = [];
        if (selectedHour === moment().hour()) {
            for (var i = 0; i < moment().minute(); i++) {
                minutes.push(i);
            }
        }
        return minutes;
    }



    //set date
    setDate(d:any){
        console.log("date object is: ", d);
        console.log("date  is: ", d.date());
        console.log("month is: ", d.month()+1);
        console.log("year is: ", d.year());
        console.log("Time :",moment(this.state.date).format("h:mm:ss A"))
        this.setState({date: d})


         const now = moment();  //get current date time
  const isFuture = d.isAfter(now); //check selected date is a future date compared to current date and time
  this.setState({date: isFuture ? d: now.toDate()}); //if it's a future date then assign the slected date else select the current date and time

    }

  render() {
    return (
      <div>
        <DatePicker
   name="Date" disabledDate={this.disabledDate}
   onChange={d => this.setState({date: d})}
   style={{width: "100%"}}
   showTime={{ disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes, 
   disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours}}
 placeholder="Select Date & Time"
   
  />
      </div>
    );
  }
}


9 commentaires

Comment allez-vous alors passer du sélecteur de temps au sélecteur de dates?


@aquinq bonjour, je ne veux pas passer du sélecteur de temps au sélecteur de date, la première fois que le sélecteur de date est déjà ouvert, connaissez-vous la solution?


Je ne trouve aucun accessoire pour cela, c'est probablement un comportement par défaut que vous ne pouvez pas personnaliser. Vous pouvez peut-être essayer de le cibler en utilisant css et le cacher de cette façon.


@aquinq, oui j'ai essayé d'utiliser ant-calendar-time-picker-btn {display: none} , il cache à la fois le bouton, l'heure et la date, je ne comprends pas comment venir cet accessoire


Vous avez raison, je ne pense pas que vous puissiez le changer.


Merci pour votre temps copain, je vais essayer une solution


Continuons cette discussion dans le chat .


qu'entendez-vous par "je veux savoir comment afficher lorsque vous sélectionnez la date de cassis avec l'heure"?


@AliKleit Bonjour, veuillez consulter mon code en direct stackblitz.com/edit/ react-ts-jddtiq? file = index.tsx , et Sélectionnez d'abord la date future et sélectionnez l'heure 8 h ou 7 h , puis cliquez à nouveau sur sélectionnez la date et choisissez la date d'aujourd'hui , lorsque je clique sur la 1ère date future et 7 ou 8 heures . cette heure s'affiche avec date d'aujourd'hui , car je m désactivé l'heure passée avec la date d'aujourd'hui , l'heure n'est pas mise à jour avec la date d'aujourd'hui et l'heure de cassis, c'est un problème, vous pouvez vérifier


3 Réponses :


0
votes

Vous pouvez cibler l'élément par css et en ajoutant display: none; propriété.

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
    display: none
}


1 commentaires

bonjour, ce n'est pas une solution, je le fais déjà, sa sélection de cache et l'heure des deux boutons, je mets à jour ma question



0
votes

Le css suivant semble fonctionner pour moi

<script>
    window.addEventListener("click", checkClass);

function checkClass(){
    var allBtns = document.querySelector('.ant-calendar-time .ant-calendar-time-picker');
    var relevantObj = document.querySelector('.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn');
  if (allBtns === null) {
    relevantObj.style.display = "none";
  } else {
    relevantObj.style.display = "block";
  }
}

</script>

EDIT : le bloc de script suivant dans l'index.html peut le faire pour vous ...

  • Lorsque vous basculez entre les boutons «sélectionner la date» et «sélectionner l'heure», un div supplémentaire est ajouté au DOM; nous cherchons donc ce div supplémentaire à chaque clic (vous pouvez ajouter un eventlistener pour la pression de touche également si vous le souhaitez) et si nous le trouvons, nous savons que le bouton doit être affiché - sinon si nous obtenons null, nous masquons le bouton ;
  • Je ne sais pas comment vous allez basculer si le bouton disparaît, vous pouvez donc changer la couleur des bordures (dans mon stackblitz) pour voir le concept fonctionner

code pertinent pour :

.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn { display: none; }

mis à jour stackblitz ici


1 commentaires

bonjour, ce n'est pas une solution, je le fais déjà, sa sélection de cache et l'heure des deux boutons, je mets à jour ma question



1
votes

Voilà, vous pouvez faire quelque chose comme ça

  1. Définissez la valeur

  2. onChange vérifier si la date est future ou inférieure à l'heure actuelle, en fonction de cela, vous pouvez définir la date

// this will display the selected date
value={moment(this.state.date)}

onChange={d => {
    // checking if selected date is greater than current time
    // if then pass as it is, else pass the current time
    const date = moment() < moment(d) ? d : moment();

    // based on that we'll set the date
    this.setState({date})
}}

DÉMO DE TRAVAIL


5 commentaires

Bonjour, j'ai un petit conflit, pouvez-vous s'il vous plaît arriver à la date future et sélectionner l'heure future, puis à nouveau sélectionner la date et choisir la date du cassis, lorsque ce moment n'est pas mis à jour, veuillez regarder ceci stackblitz.com/edit/…


@ core114, veuillez fournir les étapes exactes, j'ai sélectionné le 25 juillet 2020 8h00, puis j'ai sélectionné la date actuelle et il me montre la date actuelle avec l'heure actuelle car 8h00 est désactivé, donc il choisira la date actuelle temps disponible.


Bonjour, Oui, sélectionnez 25 et choisissez l'heure future comme 20 h, puis sélectionnez la date et choisissez l'heure de la date de cassis ne se mettant pas à jour avec comme une solution précédente


@ core114, si vous sélectionnez 25 8PM, et si vous sélectionnez la date actuelle, il sera 23 8PM, car 8PM est toujours disponible, vous pouvez sélectionner l'heure à l'heure actuelle. voici comment cela fonctionne, quel est votre comportement attendu, comment cela devrait-il fonctionner?


Merci pour le conseil, j'ai compris, mais une solution pour le changer avec le temps de cassis?