Dans le développement quotidien, nous rencontrerons certains cas, l'utilisation de l' élément-UI contrôle de sélection limite la date de l'utilisateur et la plage de temps ( par exemple: des messages de requête de début et de fin, vous devez sélectionner le délai ne peut pas être après aujourd'hui).
Lire des documents en ligne, au coup par coup, sont une variété de codes à barres simples énumérés, et aucune description détaillée de la signification de chaque paramètre, l'utilisation, novice et hostile.
Nous avons utilisé ici est DatePicker date Allez: Element site officiel de l'adresse de contrôle de la date , les restrictions d'utilisation de la date de limite de temps novice ne peut pas comprendre la façon dont les règles d'écriture. Ensuite , nous allons définir les paramètres d' interprétation détaillés dates d'interdiction. Une gamme complète de compréhension approfondie de la façon de limiter le temps et la date du contrôle.
Documents officiels restrictions de date Description:
Regardez ici faim , il est des documents officiels, écrit ici est très simple, utilisez disabledDate paramètre limite, disabledDate est une fonction qui a un paramètre dans la fonction, ce qui suit est des exemples simples pseudo-code
// le code HTML premier sélecteur plus de la date: sélecteur-options attribut // exemple: <date-EL- Picker V -modèle = "endDate" : Picker -options = "disabledDate" > </ EL-dattier> / / Vue dans lequel les données écrites sur les paramètres pertinents disabledDate: (temps) => { retour time.getTime () < nouveau nouveau . une date () le getTime () // chaque fois que le paramètre en cours ici, le temps sélecteur représentants silencieux le temps, le temps de déterminer si oui ou non ces éventuels. @ par le temps de retour> certain temps ou temps de retour <certain temps limite à la période sélectionnée. // rappelez - vous le temps nécessaire .getTime () est converti en millisecondes. })
Ce qui précède est un exemple simple, nous croyons que les élèves après lecture attentive, doivent maintenant avoir compris que la méthode des contraintes de temps, fait très simple, en réglant disabledDate paramètre du temps, le retour d' un supérieur ou inférieur à la formule, l' utilisation de fixer la date gamme.
Ensuite, nous utilisons deux cas détaillé plus interpréter clairement ce que la colonne, utilisez les contrôles de date,
Deux dates de contrôle de liaison ( début de course et de fin pour le dernier mois )
En fait, l'idée est très simple, l'heure de début affiche l'heure actuelle au maximum, l'heure de fin pour obtenir les données jusqu'au début du temps, la limite maximale pour l'heure de début ou l'heure actuelle peut être, l'interprétation détaillée suivante du code;
Astuce: paramètres nécessaires à ce jour de contrôle est le format « 31/12/2020 », mais limite en fonction du temps utilisé « < », « > », « > = », « <= » , la méthode de comparaison est nécessaire utilisation .getTime () est convertie en millisecondes, sinon, « 31/12/2020 » ce format est contraste pas oh
// HTML代码 <el-date- sélecteur v -modèle = "valeur1" espace réservé = "开始时间" : sélecteur -options = "start"> </ el-dattier> <el-date- sélecteur v -modèle = "valeur2" espace réservé = "结束时间" : sélecteur -options = "end"> </ el-dattier> // données de Vue中代码 valeur1: '31/12/2020' , valeur2: « 2020-12- 31' , commencer: { disabledDate: (temps) =>{ // ici 30 jours le nombre de millisecondes const Espace = 30 * 24 * 3600 * 1000 @ Définissez le nombre minimum de millisecondes de temps, l'heure actuelle moins 30 jours , le nombre de millisecondes const mintime = new new une date () getTime () -. L' espace // définir le nombre maximum de millisecondes du temps actuel , plus le nombre de millisecondes jour aujourd'hui const tempsMaxi = new new une date ( nouveau nouveau une date ( nouvelle nouvelle une date () le toLocaleDateString ()) le getTime () + 24 * 60 * 60 * 1000 -... 1 ) // retourner une formule pour le temps courant maximum, un minimum de 30 jours avant le retour time.getTime () < || time.getTime mintime ()> tempsMaxi } }, Fin: { disabledDate: (temps) => { // ici 30 jours le nombre de millisecondes const espace = 30 * 24 * 3600 * 1000 // Obtenez date heure const le startTime = VALUE1 // régler le temps de sélection en cours startTimes const le startTime = || new new une date () le getTime () -. L' espace // régler le temps de sélection minimum, le temps nécessaire pour manuellement dateRange méthode actuelle pour obtenir l'heure actuelle, sous le code doit montrer la voie pour obtenir l'heure actuelle const mintime = (startTimes === dateRange)? nouveau nouveau une date (startTimes) .getTime (): nouveaux nouveau une date (startTimes) .getTime () - (1 * 24- * 3600 * 1000 ) / / définir le temps maximum de choisir aujourd'hui const tempsMaxi = new new une date ( nouvelle nouvelle une date ( nouvelle nouvelle une date () toLocaleDateString ()) getTime () + 24- * 60 * 60 * 1000 - .. 1 ) //Voici aujourd'hui encore choisir de retourner une formule plus grande boîte ou l' heure de début, un minimum de 30 jours avant le retour time.getTime () <mintime || time.getTime ()> tempsMaxi } },
// obtenir l'heure actuelle de la fonction d' écriture var dd = new new date () dd.setDate (dd.getDate () + addDate) // Get addDate jours après la date de var Y = dd.getFullYear () var m = dd.getMonth () +. 1 <10? 0 '+ (dd.getMonth () + 1.). dd.getMonth () + 1 // obtenir la date du mois en cours, représentent moins de 10 0 var D = dd.getDate () <10?' 0 « + dd.getDate ( ): dd.getDate () // obtenir le nombre actuel de plusieurs, moins de 10 0 leT dateRange = Y + '-' + m + '-' + D
Donnez à un homme un poisson que de donner la pêche, nous pouvons espérer de mieux comprendre, de limiter l'utilisation de cette méthode de la date de commande, plutôt que aveuglément copier le code correspondant, une copie peut être plus rapide dans un court laps de temps, mais qui veulent améliorer leur nous devons continuer à comprendre la conception de chaque paramètre, des idées d'utilisation.