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?
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> ); } }
3 Réponses :
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 }
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
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 ...
code pertinent pour :
.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn { display: none; }
mis à jour stackblitz ici
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
Voilà, vous pouvez faire quelque chose comme ça
Définissez la valeur
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}) }}
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?
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 accessoireVous 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 sursélectionnez la date et choisissez la date d'aujourd'hui
, lorsque je clique sur la1ère date future et 7 ou 8 heures
. cette heure s'affiche avecdate d'aujourd'hui
, car je mdé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