Plugin de formulario jQuery EasyUI -Datebox (cuadro de fecha)

jQuery EasyUI 插件Plugin de jQuery EasyUI

Se extiende de $.fn.combo.defaults. Puede sobrescribir los valores predeterminados a través de $.fn.datebox.defaults.

El cuadro de fecha (datebox) combina un campo de texto editable con un panel de calendario desplegable, desde el cual el usuario puede seleccionar una fecha. La cadena introducida en el campo de texto se puede convertir en una fecha válida. La fecha seleccionada también se puede convertir al formato deseado.

Dependencias

  • combo
  • calendar

Uso

Crear un cuadro de fecha (datebox) a partir del marcado.

<input id="dd" type="text" class="easyui-datebox" required="required">

Crear un cuadro de fecha (datebox) usando JavaScript.

<input id="dd" type="text">

$('#dd').datebox({
    required:true
});

Propiedades

Estas propiedades se extienden desde el combo. Las siguientes son propiedades agregadas para el cuadro de fecha (datebox).

Nombre Tipo Descripción Valor predeterminado
panelWidth number El ancho del panel de calendario desplegable. 180
panelHeight number El alto del panel de calendario desplegable. auto
currentText string El texto que se muestra en el botón de fecha actual. Today
closeText string El texto que se muestra en el botón de cerrar. Close
okText string El texto que se muestra en el botón de Aceptar. Ok
disabled boolean Cuando se establece en true, se deshabilita este campo. false
buttons array Los botones debajo del calendario. Esta propiedad está disponible desde la versión 1.3.5.
Ejemplo de código:
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
        alert('click MyBtn');
    }
});
$('#dd').datebox({
    buttons: buttons
});
sharedCalendar string,selector Un calendario compartido utilizado por múltiples componentes de cuadro de fecha (datebox). Esta propiedad está disponible desde la versión 1.3.5.
Ejemplo de código:
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter function Una función para formatear la fecha. Esta función tiene un parámetro 'date' y devuelve un valor de cadena. El siguiente ejemplo demuestra cómo sobrescribir la función de formato (formatter) predeterminada.
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser function Una función para analizar la cadena de fecha. Esta función tiene una cadena 'date' y devuelve un valor de fecha. El siguiente ejemplo demuestra cómo sobrescribir la función de análisis (parser) predeterminada.
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

Eventos

Nombre Parámetros Descripción
onSelect date Se dispara cuando el usuario selecciona una fecha.
Ejemplo de código:
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

Métodos

Estos métodos se extienden desde el combo. Los siguientes son métodos sobrescritos para el cuadro de fecha (datebox).

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
calendar none Obtiene el objeto de calendario (calendar). El siguiente ejemplo demuestra cómo obtener el objeto de calendario (calendar) y luego volver a mostrarlo.
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value Establece el valor del cuadro de fecha (datebox).
Ejemplo de código:
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value
jQuery EasyUI 插件Plugin de jQuery EasyUI Otras extensiones