1. layDate se basa principalmente en cinco tipos de métodos de selección: selector de año, selector de año y mes, selector de fecha, selector de tiempo, selector de fecha y hora y toda la selección de rango de soporte (es decir, control dual). Potente análisis de formato de fecha personalizado integrado y mecanismo de corrección legal, incluida la versión china y la versión internacional, el tema es simple pero flexible y diverso. Dado que está escrito en JavaScript nativo sin dependencias, se puede utilizar como un componente independiente.
2. Nombre de carga del módulo: laydate.
3. Opciones de parámetros básicos
3.1 Establezca los parámetros básicos a través del método principal: laydate.render (opciones). También puede utilizar el método: laydate.set (opciones) para establecer los parámetros básicos globales.
4. elemento vinculante de elem
4.1. Tipo: String / DOM, Valor predeterminado: Ninguno.
4.2 Campo obligatorio, utilizado para vincular los elementos que realizan la representación de la fecha, el valor es generalmente un selector u objeto DOM.
5. Úselo como un componente independiente
5.1. Descargue el paquete de componentes de la versión independiente layDate:
5.2. Introduzca laydate.js para llamar a métodos entre:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用layDate独立版</title>
</head>
<body>
<input type="text" placeholder="请选择日期" id="test1">
<script type="text/javascript" src="layDate-v5.0.9/laydate/laydate.js"></script>
<script type="text/javascript">
// 执行一个laydate实例
laydate.render({
elem: '#test1' // 指定元素
});
</script>
</body>
</html>5.3. Imagen de efecto
6. tipo de selección de control de tipo
6.1 Tipo: Cadena, valor predeterminado: fecha.
6.2. Se utiliza para proporcionar diferentes tipos de selectores por separado, y los valores opcionales son los siguientes:
6.3. Ejemplos
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年选择器
laydate.render({
elem: '#test1'
,type: 'year'
});
// 年月选择器
laydate.render({
elem: '#test2'
,type: 'month'
});
// 日期选择器
laydate.render({
elem: '#test3'
,type: 'date' // 默认, 可不填
});
// 时间选择器
laydate.render({
elem: '#test4'
,type: 'time'
});
// 日期时间选择器
laydate.render({
elem: '#test5'
,type: 'datetime'
});
});
</script>7. rango: abre la selección de rango del panel izquierdo y derecho
7.1. Tipo: Booleano / Cadena, valor predeterminado: falso.
7.2 Si se establece en verdadero, se utilizará la división "-" de forma predeterminada. También puede establecer directamente el carácter dividido. Los cinco tipos de selectores admiten la selección de rango de los paneles izquierdo y derecho.
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年范围选择器
laydate.render({
elem: '#test6'
,type: 'year'
,range: true
});
// 年月范围选择器
laydate.render({
elem: '#test7'
,type: 'month'
,range: '~'
});
// 日期范围选择器
laydate.render({
elem: '#test8'
,type: 'date' // 默认, 可不填
,range: '~'
});
// 时间范围选择器
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
// 日期时间范围选择器
laydate.render({
elem: '#test10'
,type: 'datetime'
,range: '~'
});
});
</script>8. formato formato personalizado
8.1. Tipo: Cadena, valor predeterminado: aaaa-MM-dd.
8.2 Establezca un formato de fecha que necesite mediante los símbolos de formato respectivos y la longitud de la fecha y la hora. Los formatos admitidos por layDate son los siguientes:
8.3. Combine los diferentes caracteres de formato anteriores en una cadena de fecha y hora, que se puede componer a voluntad, como se muestra a continuación:
8.4. Ejemplos
<script type="text/javascript">
layui.use('laydate', function(){
var laydate = layui.laydate;
// 年格式化
laydate.render({
elem: '#test11'
,type: 'year'
,format: 'yyyy年'
});
// 年月格式化
laydate.render({
elem: '#test12'
,type: 'month'
,format: 'yyyy年MM月'
});
// 日期格式化
laydate.render({
elem: '#test13'
,type: 'date' // 默认, 可不填
,format: 'yyyy年MM月dd日'
});
// 时间格式化
laydate.render({
elem: '#test14'
,type: 'time'
,format: '北京时间: HH时mm分ss秒'
});
// 日期时间格式化
laydate.render({
elem: '#test15'
,type: 'datetime'
,format: 'yyyy年MM月dd日 HH时mm分ss秒'
});
});
</script>9. valor-valor inicial
9.1. Tipo: Cadena, valor predeterminado: nueva Fecha ().
9.2 Soporte para pasar caracteres de formato de fecha que cumplan con la configuración del parámetro de formato, o nueva Fecha ().
10. isInitValue-Valor inicial llenado
10.1. Tipo: booleano, valor predeterminado: verdadero.
10.2 Se usa para controlar si se llena automáticamente el elemento con el valor inicial (usar con el parámetro de valor).
11. valor mínimo / máximo de fecha y hora en el rango más pequeño / grande
11.1. Tipo: cadena, valor predeterminado: mínimo: '1900-1-1', máximo: '2099-12-31'.
11.2 Establezca el valor de fecha u hora dentro de un rango limitado, los que están fuera del rango no serán seleccionados. La asignación de estos dos parámetros es muy flexible, principalmente en las siguientes situaciones:
12. Evento de control emergente personalizado de disparador
12.1 Tipo: Cadena, valor predeterminado: foco.
12.2 Si el elemento vinculado no es un cuadro de entrada, el evento predeterminado es: haga clic.
13. mostrar pantalla predeterminada
13.1 Tipo: booleano, valor predeterminado: falso.
13.2 Si se establece: verdadero, el control se mostrará en el área del elemento enlazado por defecto. Usualmente se usa para eventos externos para llamar al control.
14. método de posicionamiento de posición
14.1 Tipo: Cadena, valor predeterminado: absoluto.
14.2. Usados para configurar el método de posicionamiento del control, existen los siguientes tres valores opcionales:
15. Orden de apilamiento zIndex
15.1. Tipo: Número, valor predeterminado: 66666666.
15.2 Generalmente se utiliza para resolver el problema del encubrimiento mutuo con otros elementos. Si el parámetro de posición se establece en estático, este parámetro no es válido.
16. showBottom-si mostrar la barra inferior
16.1. Tipo: booleano, valor predeterminado: verdadero.
16.2 Si establece falso, el área de la barra inferior del control no se mostrará.
17. Botones btns-Tool
17.1 Tipo: Matriz, valor predeterminado: ['borrar', 'ahora', 'confirmar'].
17.2 Los botones que se muestran en la esquina inferior derecha estarán ordenados en el orden de la matriz Los valores identificables incorporados son: borrar, ahora, confirmar.
18. Lang-Language
18.1. Tipo: Cadena, valor predeterminado: cn.
18.2 Tenemos versiones integradas en dos idiomas: cn (versión en chino), en (versión internacional, versión en inglés).
19 .tema-tema
19.1 Tipo: Cadena, valor predeterminado: predeterminado.
19.2 Los valores opcionales del tema son: predeterminado (predeterminado simple), molv (fondo verde oscuro), cuadrícula (tema de cuadrícula).
19.3. Además, también puede pasar otros caracteres, como: theme: 'xxx', luego el control tendrá una clase CSS adicional con class = "laydate-theme-xxx", para que pueda personalizar el tema individualmente .
20. calendario: si se muestran los días festivos del calendario gregoriano
20.1 Tipo: booleano, valor predeterminado: falso.
20.2 Layui ha incorporado algunos festivales importantes en el calendario gregoriano comunes en nuestro país, que se pueden abrir al establecer la realidad. No se mostrará la versión internacional.
21. Marque las fechas importantes
21.1 Tipo: Objeto, Valor predeterminado: Ninguno.
21.2 El feriado del calendario gregoriano representado por el parámetro de calendario es más una decoración. Por tanto, también necesitamos personalizar las fechas importantes, como: aniversario de bodas, calendario, etc. Se divide en los siguientes dos tipos:
22. Devolución de llamada para la apertura inicial del control listo
22.1 El control se activa cuando se abre y la devolución de llamada devuelve un parámetro: el objeto de fecha y hora inicial.
ready: function(date){
console.log(date);
}23. Devolución de llamada después de que se cambien la fecha y la hora,
23.1 Se activará cuando se cambien el año, mes, día y hora. La devolución de llamada devuelve tres parámetros, que representan: el valor generado, el objeto de fecha y hora y el objeto de fecha y hora de finalización.
change: function(value, date, endDate){
console.log(value, date, endDate);
}24. Devolución de llamada después de seleccionar el control: hecho
24.1 Haga clic en Fecha, Borrar, Ahora, y todo se activará en Aceptar. La devolución de llamada devuelve tres parámetros, que representan: el valor generado, el objeto de fecha y hora y el objeto de fecha y hora de finalización.
done: function(value, date, endDate){
console.log(value, date, endDate);
}25. Mensaje de control emergente
25.1 De hecho, la ejecución del método principal laydate.render (opciones) devolverá un objeto de instancia actual. Contiene algunos atributos y métodos de miembros, como el método de sugerencia.
var ins = laydate.render({
elem: '#test21'
,type: 'datetime'
,change: function(value, date, endDate){
ins.hint(value); // 在控件上弹出value值
console.log(value, date, endDate);
}
});26. Otros métodos
27. Ejemplos
27.1. Código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>日期模块 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<big>年选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
</div>
<big>年月选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test2">
</div>
<big>日期选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test3">
</div>
<big>时间选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test4">
</div>
<big>日期时间选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test5">
</div>
<br /><br />
<big>年范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<big>年月范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test7">
</div>
<big>日期范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
</div>
<big>时间范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test9">
</div>
<big>日期时间范围选择器:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test10">
</div>
<br /><br />
<big>年格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test11">
</div>
<big>年月格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test12">
</div>
<big>日期格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test13">
</div>
<big>时间格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test14">
</div>
<big>日期时间格式化:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test15">
</div>
<br /><br />
<big>墨绿主题:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test16">
</div>
<big>自定义颜色背景:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test17">
</div>
<big>格子主题:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test18">
</div>
<br /><br />
<big>定位fixed:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test19">
</div>
<br /><br />
<h2>直接嵌套在指定容器中:</h2>
<div class="layui-block" id="test20"></div>
<br /><br />
<big>标注重要日子:</big>
<div class="layui-inline">
<input type="text" class="layui-input" id="test21">
</div>
<br /><br />
<h2>获取某年某月的最后一天:</h2>
<div style="width: 300px; height: 100px; background: pink;" class="layui-inline" id="test22"></div>
<br /><br />
<h2>获取当前年某月的最后一天:</h2>
<div style="width: 300px; height: 200px; background: green;" class="layui-inline" id="test23"></div>
<script type="text/javascript">
layui.use(['laydate', 'jquery'], function(){
var laydate = layui.laydate
,$ = layui.jquery;
// 年选择器
laydate.render({
elem: '#test1'
,type: 'year'
});
// 年月选择器
laydate.render({
elem: '#test2'
,type: 'month'
});
// 日期选择器
laydate.render({
elem: '#test3'
,type: 'date' // 默认, 可不填
,min: -7
,max: 7
});
// 时间选择器
laydate.render({
elem: '#test4'
,type: 'time'
});
// 日期时间选择器
laydate.render({
elem: '#test5'
,type: 'datetime'
,min: '2021-1-1 00:00:00'
,max: '2021-12-31 23:59:59'
});
// 年范围选择器
laydate.render({
elem: '#test6'
,type: 'year'
,range: true
});
// 年月范围选择器
laydate.render({
elem: '#test7'
,type: 'month'
,range: '~'
});
// 日期范围选择器
laydate.render({
elem: '#test8'
,type: 'date' // 默认, 可不填
,range: '~'
,min: (new Date()).getTime() - 86400000 * 10
,max: (new Date()).getTime() + 86400000 * 10
});
// 时间范围选择器
laydate.render({
elem: '#test9'
,type: 'time'
,range: true
});
// 日期时间范围选择器
laydate.render({
elem: '#test10'
,type: 'datetime'
,range: '~'
});
// 年格式化
laydate.render({
elem: '#test11'
,type: 'year'
,format: 'yyyy年'
,value: new Date()
,isInitValue: true
});
// 年月格式化
laydate.render({
elem: '#test12'
,type: 'month'
,format: 'yyyy年MM月'
,value: new Date()
,isInitValue: true
});
// 日期格式化
laydate.render({
elem: '#test13'
,type: 'date' // 默认, 可不填
,format: 'yyyy年MM月dd日'
,value: new Date()
,isInitValue: true
});
// 时间格式化
laydate.render({
elem: '#test14'
,type: 'time'
,format: '北京时间: HH时mm分ss秒'
,value: new Date()
,isInitValue: true
});
// 日期时间格式化
laydate.render({
elem: '#test15'
,type: 'datetime'
,format: 'yyyy年MM月dd日 HH时mm分ss秒'
,value: new Date()
,isInitValue: true
});
// 墨绿主题
laydate.render({
elem: '#test16'
,type: 'year'
,theme: 'molv'
,lang: 'en'
,trigger: 'focus'
});
// 自定义颜色背景
laydate.render({
elem: '#test17'
,type: 'month'
,theme: '#393D49'
,lang: 'en'
,showBottom: false
});
// 格子主题
laydate.render({
elem: '#test18'
,type: 'date' // 默认, 可不填
,theme: 'grid'
,lang: 'en'
,showBottom: false
});
laydate.render({
elem: '#test19'
,type: 'time'
,position: 'fixed'
});
// 直接嵌套在指定容器中
laydate.render({
elem: '#test20'
,type: 'datetime'
,position: 'static'
,calendar: true
});
// 标记重要日子
var ins = laydate.render({
elem: '#test21'
,type: 'datetime'
,mark: {
'0-8-15': '中秋节' // 0即代表每一年
,'0-0-28': '爬山' // 0-0即代表每年每月
,'2020-1-1': '结婚'
}
,ready: function(date){
console.log(date);
}
,change: function(value, date, endDate){
ins.hint(value); // 在控件上弹出value值
console.log(value, date, endDate);
}
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
});
$('#test22').text('今年2月有' + laydate.getEndDate(2) + '天');
$('#test23').text('2020年2月有' + laydate.getEndDate(2, 2020) + '天');
});
</script>
</body>
</html>27.2. Imagen de efecto
