¿Por qué el espacio de tiempo WdatePicker no se puede utilizar entre la madrugada y los 30 minutos de la mañana?
1. Visualización en infinitos marcos
No importa dónde coloque el control de fecha, no necesita preocuparse de que el iframe externo lo bloquee y afecte la experiencia del cliente. porque My97 El control de fecha se puede mostrar en fotogramas infinitos
Ejemplo 2-7 Demostración en fotogramas infinitos
El control de fecha se puede mostrar en fotogramas infinitos sin importar cómo anide los fotogramas. , no tienes que preocuparte si hay barras de desplazamiento
2. El calendario de la República de China y otros calendarios especiales
Cuando el formato de año está configurado en. Formato yyy, utilice el atributo de diferencia de año YearOffset (el valor predeterminado es 1911, el primer año de la República de China), puede realizar el calendario anual de la República de China y otros calendarios especiales
Ejemplo 2-8 República de demostración del año de China
ITPUB espacio personal w_it[kKS
lt; input type= "text" id="d28" onClick="WdatePicker({dateFmt：'yyy/MM/ dd'})"/gt;ITPUB espacio personal hs RGT: rCSO"|)t
Espacio personal ITPUB $d0[8v|：U[S oO
Nota: Cuando el El formato del año está configurado en yyy, la fecha real se restará por una diferencia de año (el valor predeterminado es: 1911, si es el año de la República de China, úselo. El valor predeterminado no requiere configuración adicional). otras diferencias, se puede configurar en forma de parámetros
3 Aporta comodidad a la programación
Si el valor de el es este, puede omitirlo, es decir, todo el: esto se puede omitir. Espacio personal ITPUB $bB n7W"K0HW
Cuando el cuadro de fecha está desactivado, está prohibido cambiar la fecha (el cuadro de selección no aparecerá) Espacio personal ITPUB Qa gJ4n7S.
Si el evento onpicked no está definido, el evento onchange del cuadro de texto se activa automáticamente ITPUB personal space vEN*WS?
Si el evento oncleared no está definido, el evento onchange se activa automáticamente cuando se borra
4 Otros atributos
Establezca el atributo readOnly para especificar si el cuadro de fecha es de solo lectura
i@|.tamp; M n)g0 Establece el atributo highLineWeekDay para especificar si se resalta Weekends
n[(cGG, F!L8[0 Establece el atributo isShowOthers para especificar si se muestran fechas en otros meses Espacio personal ITPUB c N G VI(vE[
Agregar class= "Wdate" hará que aparezca un ícono de fecha en el lado derecho del cuadro de selección
Máscaras personalizadas y en varios idiomas
1. Compatibilidad con varios idiomas
A través del atributo lang, cada control de fecha puede configurar el idioma por separado. Por supuesto, también puede configurar el idioma global a través de WdatePicker.js.
>R OWo'U2F} a0 Para obtener la lista de idiomas y las instrucciones de instalación de idiomas, consulte Configuración de idioma
Ejemplo 3-1 Ejemplo de varios idiomas
Chino tradicional: espacio personal ITPUB ta.e {6Ath
lt; input id="d311" class="Wdate" type="text" onFocus ="WdatePicker({lang:'zh-tw'})"/gt;
Inglés: espacio personal ITPUB 6g'q0a'S, lj.BbP/z{
lt; input id="d312" class="Wdate" type="text" onFocus="WdatePicker({lang :
'en'})"/gt;
Chino simplificado: espacio personal ITPUB 6]Jamp; Y; [[I4Y]
lt; input id="d313" class=" Wdate" type="text" onFocus="WdatePicker({lang：'zh-cn'})"/gt;ITPUB espacio personal 4? o3`*ant9|#f
ITPUB espacio personal gAF nV /G
Nota: De forma predeterminada, lang='auto' significa que el idioma se selecciona automáticamente según el idioma del navegador.
2. Personalice y cambie dinámicamente las máscaras e inmediatamente vaya a la página. centro de aspectos
A través del atributo de aspecto, puede configurar el aspecto por separado para cada control de fecha. Por supuesto, también puede configurar el aspecto global a través de WdatePicker.js
"J)`. Lista de máscaras s9@/J c1R0 y Para obtener detalles sobre las instrucciones de instalación de máscaras, consulte Configuración de máscaras
Ejemplo 3-2 Demostración de máscaras
Máscara predeterminada predeterminada: máscara: 'default'
1d|s_!K}TQQ0
`eDDa]F0lt; input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/gt;ITPUB espacio personal 3K xxc1^~Yp
GVv-z1@y oK'A0Nota: skin='default' está configurado en WdatePicker, por lo que se puede omitir aquí. De manera similar, si configura el skin en WdatePicker para. 'whyGreen', entonces no especifique el skin El skin 'whyGreen' se utiliza en todos los casos
3Fs y(b zk0whyGreen skin: skin: 'whyGreen' ITPUB espacio personal UaFu_T'_
lt; input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/gt;ITPUB espacio personal'P1|]Jamp;D.j${ zV
Espacio personal ITPUB GT M(F)H4D7Kv
Nota: para obtener más máscaras, vaya al centro de máscaras para descargarlas
4.
1. Restricciones estáticas en el espacio personal de ITPUB v^: gI9?G/a; cL
Nota: el formato de fecha debe ser coherente con realDateFmt y realTimeFmt
Puedes configurar minDate (fecha mínima), maxDate (fecha máxima) Es un valor de fecha estático para limitar el rango de fechas
Ejemplo 4-1-1 Limitar el rango de fechas a 2006-09-10 para 2008-12-20
Espacio personal ITPUB n Z1e5o$F?ii cd
lt; input id="d411" class="Wdate" type="text" onfocus=" WdatePicker({skin:'whyGreen',minDate:'2006-09- 10', maxDate: '2008-12-20'})"/gt;
Ejemplo 4-1-2 La fecha restringida el rango es 2008-3-8 11:30:00 a 2008-3 -10 20:59:30
PVY2U [X4D0lt; tipo de entrada="text" class="Wdate" id="d412" información
cus="WdatePicker({skin:'whyGreen',dateFmt:'aaaa-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/gt;
Ejemplo 4-1-3 El rango de fechas restringido es de febrero de 2008 a octubre de 2008 de 2018
Espacio personal ITPUB 8`3umXe E/z1H
lt; input type="text" class="Wdate" id="d413" onfocus="WdatePicker({ dateFmt: ' yyyy año M mes', minDate: '2008-2', maxDate: '2008-10'})"/gt;
El ejemplo 4-1-4 limita el rango de fechas a 8:00:00 a 11:30:00
le:wY~0lt; input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm :ss' , minDate: '8:00:00', maxDate: '11:30:00'})"/gt;
2. Restricciones dinámicas
}3SngB9namp; H/{ Y.n f0Nota: El formato de fecha debe ser consistente con realDateFmt y realTimeFmt
Puede limitar el rango de fechas a través de variables dinámicas proporcionadas por el sistema, como y (año actual), M (mes actual), etc. También
también puedes usar #{} para realizar operaciones de expresión, como: #{d 1}: significa mañana
G(O; H2b_ E0Y0
cGh ] Tabla de variables dinámicas Td0
Formato
Descripción
y
Año actual
M
Mes actual
d
Día actual
ld
Último día de este mes
H
Hora actual
m
Minuto actual
s
Segundo actual
# {}
Expresiones operativas, como: #{d 1}: significa mañana
#F{}
La función entre {} puede ser escrito desde Definir código JS
Ejemplo 4-2-1 Solo puede seleccionar fechas anteriores a hoy (incluido hoy)
Espacio personal ITPUB 6YW^BoYw
lt ; input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen', maxDate:'y-M-d'})"/gt;
Ejemplo 4- 2-2 Si usa una expresión de operación, solo puede seleccionar fechas posteriores a hoy (excluyendo hoy)
0B}M: @ /I1g5t0lt; input id="d422" class="Wdate" type; ="text " onfocus="WdatePicker({minDate:'y-M-#{d 1}'})"/gt;
El ejemplo 4-2-3 solo puede seleccionar fechas a partir del 1 de este mes hasta finales de este mes Un día
ITPUB espacio personal 7_/L{1Q#E*eOh
lt;
date" type="text" onfocus="WdatePicker({minDate: 'y-M-01', maxDate: 'y-M-ld'})"/gt;
El ejemplo 4-2-4 solo puede ser Fechas seleccionadas desde las 7:00:00 de hoy hasta las 21:00:00 de mañana
Espacio personal ITPUB f/Bamp; " Wdate" type="text" onfocus="WdatePicker({dateFmt: 'aaaa-M-d H: mm: ss', minDate: 'a-M-d 7:00:00', maxDate: 'a-M-#{d 1} 21: 00 :00'})"/gt;
El ejemplo 4-2-5 usa expresiones aritméticas para seleccionar solo fechas desde hace 20 horas hasta 30 horas después
GI: u m r/PEf0lt; input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt: 'aaaa-MM-dd HH: mm', minDate: 'a-M-d # {H -20}: m: s', maxDate: 'y-M-d #{H 30}: m: s'})"/gt;
1. Restricciones de personalización de scripts
IA1U{ MuWj*Wn: q0Nota: El formato de fecha debe ser coherente con realDateFmt y realTimeFmt
El sistema proporciona dos API, $dp.$D y $dp.$DV, para ayudarlo en las operaciones de fecha. , también puede establecer las restricciones de fecha que desee completando su secuencia de comandos personalizada en #F{}
Ejemplo 4-3-1 La fecha anterior no puede ser mayor que la fecha siguiente y ambas Ninguna de las fechas puede ser mayor que 2020-10-01
El contrato es válido desde el
/O x!q2|HNa?6dKp0lt; input id="d4311" class="Wdate" escriba ="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(/'d4312/')||/'2020-10-01/'}'})"/gt; p >
$b6i，A}/kq0lt; input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate：'#F{$dp.$D(/'d4311) / ')}', maxDate: '2020-10-01'})"/gt;
ES'k, ZkG0ITPUB espacio personal 0Zi: {Y(w v4}: {3q
Nota: Espacio personal ITPUB $H6m Ogn#b _.S2s
El formato de fecha de las dos fechas debe ser el mismo espacio personal ITPUB qw (v.ja8H ?$s/q, sI
Espacio personal ITPUB: `{9v]-Cr
$dp.$ es equivalente a la función document.getElementById.
L k; ¿Por qué ' usa / '? Esto se debe a que " y ' son utilizados por funciones periféricas, así que use el carácter de escape /; de lo contrario, se generará un error de sintaxis JS. ITPUB personal space Zpvu8m TZ#M
Entonces estás en otros lugares. Cuando lo uses, asegúrate de cambiar /' a " o '.
<p>0mC#?：b/[0ITPUB espacio personalz)|P9UyP[
#F{$dp.$D(/'d4312/')||/'2020-10-01/' } significa que cuando d4312 esté vacío, se utilizará 2020-10-01