En el desarrollo diario, encontraremos algunos casos, el uso del Elemento-UI control de selección limita el rango de fecha y hora del usuario (ejemplo: mensajes de consulta de inicio y fin, es necesario seleccionar el límite de tiempo no puede ser a partir de hoy).
Leer algunos documentos en línea, poco a poco, una gran variedad de códigos de barras simples en la lista, y no hay una descripción detallada del significado de cada parámetro, el uso, novato y antipático.
Utilizamos aquí es DatePicker Selector de fecha: Elemento web oficial de la dirección de control de fecha , restricciones de uso para la fecha límite de tiempo novato no pueden entender la forma en que las reglas de escritura. A continuación vamos a configurar los parámetros que se detallan fechas de bloqueo de interpretación. Una amplia gama de conocimiento profundo de cómo limitar la hora y la fecha del control.
Los documentos oficiales datan restricciones Descripción:
Mira aquí con hambre está documentos oficiales, escritos aquí es muy simple, utilizar disabledDate parámetro para limitar, disabledDate es una función que tiene un parámetro dentro de la función, la siguiente es ejemplos de pseudo-código simple
// el código HTML primer selector de fecha además: picker-options atributo // ejemplo: <fecha-EL- Selector V -model = "endDate" : Selector de -options = "disabledDate" > </ EL-selector de fecha> / / Vue en el que los datos escritos en los parámetros relevantes disabledDate: (tiempo) => { retorno time.getTime () < nueva nueva . una Fecha () la getTime () // cada vez que el parámetro actual aquí, los representantes silenciosas selector de los tiempos tiempo, el tiempo para determinar si o no estos opcional. @ por tiempo de retorno> cierto tiempo o tiempo de retorno <cierto límite de tiempo para el intervalo de tiempo seleccionado. // recordar el tiempo requerido .getTime () se convierte en milisegundos. })
Lo anterior es un ejemplo sencillo, creemos que los estudiantes después de una lectura cuidadosa, deben ahora han comprendido que el método de las limitaciones de tiempo, hecho muy simple, mediante el establecimiento de disabledDate parámetro de tiempo, regresar un mayor o menor que la fórmula, su uso para establecer la fecha gama.
A continuación, utilizamos dos casos detallados a interpretar con más claridad lo que la columna, utilice los controles de fecha,
Dos fechas de control de enlace ( de inicio y fin límite para el último mes )
De hecho, la idea es muy simple, hora de inicio muestra la hora actual al máximo, el tiempo del fin de obtener los datos a través del principio de los tiempos, el límite máximo para la hora de inicio o la hora actual puede ser; la siguiente interpretación detallada del código;
Consejo: los parámetros necesarios para el control de la fecha es el formato "31/12/2020", pero restringe en función del tiempo en uso "<", ">", "> =", "<=" , se necesita el método de comparación uso .getTime () se convierte en milisegundos, de lo contrario, "12/31/2020" este formato no se contraste oh
// HTML代码 <fecha-el- selector v -model = "valor1" marcador de posición = "开始时间" : selector de -options = "start"> </ el-selector de fecha> <fecha-el- selector v -model = "valor2" marcador de posición = "结束时间" : selector de -opciones = "extremo"> </ el-selector de fecha> // datos Vue中中代码 valor1: '12/31/2020' , valor2: '2020-12- 31' , empezar: { disabledDate: (tiempo) =>{ // aquí 30 días el número de milisegundos const Espacio = 30 * 24 * 3600 * 1000 @ Establecer el número mínimo de milisegundos de tiempo, la hora actual menos de 30 días el número de milisegundos const MinTime = new new una Fecha () getTime () -. Espacio // establecer el número máximo de milisegundos de la hora actual más el número de días milisegundos hoy const MaxTime = new new una Fecha ( nuevo nuevo una fecha ( nuevo nuevo una fecha () el toLocaleDateString ()) la getTime () + 24 * 60 * 60 * 1000 -... 1 ) // devolver una fórmula para el tiempo máximo de corriente, un mínimo de 30 días antes de retorno time.getTime () < || time.getTime MinTime ()> MaxTime } }, Fin: { disabledDate: (tiempo) => { // aquí 30 días el número de milisegundos const Espacio = 30 * 24 * 3600 * 1000 // Obtener fecha y hora const startTime = VALOR1 // establecer la hora actual selección startTimes const startTime = || nuevo nuevo una Fecha () la getTime () -. Espacio // establecer el tiempo de selección mínima, el tiempo necesario para manualmente dateRange método actual para obtener la hora actual, a continuación el código tiene que mostrar el camino para obtener la hora actual const MinTime = (startTimes === dateRange)? nuevo nuevo una fecha (startTimes) .getTime (): nuevas nuevo una fecha (startTimes) .getTime () - (1 * 24 * 3600 * 1000 ) / / establecer el tiempo máximo para elegir hoy const = MaxTime nuevo nuevo una fecha ( nuevo nuevo una fecha ( nuevo nuevo una Fecha () toLocaleDateString ()) getTime () + 24 * 60 * 60 * 1000 - .. 1 ) //Aquí es hoy en día siguen optando por regresar a una fórmula más grande de caja o la hora de inicio, un mínimo de 30 días antes del retorno time.getTime () <MinTime || time.getTime ()> MaxTime } },
// obtener la hora actual de la función de la escritura var dd = nueva nueva fecha a () dd.setDate (dd.getDate () + ADDDATE) // Get ADDDATE días después de la fecha de var Y = dd.getFullYear () var m = dd.getMonth () +. 1 <10? 0 '+ (dd.getMonth () + 1.):. dd.getMonth () + 1 // obtener la fecha del mes en curso, son menos del 10 0 var D = dd.getDate () <10?' 0 '+ dd.getDate ( ): dd.getDate () // obtener el número actual de varios, hasta menos de 10 0 la dejar dateRange = Y + '-' + m + '-' + D
Dale a un hombre un pez que dar la pesca, podemos esperar para comprender mejor, limitar el uso de este método de fecha de control, en lugar de seguir ciegamente a copiar el código correspondiente, copia puede ser más rápido en un corto tiempo, pero quieren mejorar su hay que seguir para entender el diseño de cada parámetro, ideas de uso.