19 KiB

Raw Blame History

DatePicker

Utiliza Date Picker para introducir fecha.

<<<<<<< HEAD Utilice Date Picker para introducir la fecha.

Ingresar Fecha

Date Picker básico por "día".

:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.

Entrar fecha

Selector de fecha básico limitado por día.

:::demo Ésta medición es decidido por el atributo 'type'.Puedes permitir rápidas opcíones por crear un picker-options objecto con propiedad shortcuts.La fecha minusválida es establecido por la función disabledDate.

4c81a5c292

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a day">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Picker with quick options</span>
    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="Pick a day"
      :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: 'Yesterday',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: 'A week ago',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>

:::

<<<<<<< HEAD

Otras mediciones

Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar.

Otras medidas

Puedes escoger semana,mes o año por ampliar el estándar fecha recogedor componente.

4c81a5c292

:::demo

<div class="block">
  <span class="demonstration">Week</span>
  <el-date-picker
    v-model="value3"
    type="week"
    format="Week WW"
    placeholder="Pick a week">
  </el-date-picker>
</div>
<div class="block">
  <span class="demonstration">Month</span>
  <el-date-picker
    v-model="value4"
    type="month"
    placeholder="Pick a month">
  </el-date-picker>
</div>
<div class="block">
  <span class="demonstration">Year</span>
  <el-date-picker
    v-model="value5"
    type="year"
    placeholder="Pick a year">
  </el-date-picker>
</div>

<script>
  export default {
    data() {
      return {
        value3: '',
        value4: '',
        value5: ''
      };
    }
  };
</script>

:::

<<<<<<< HEAD

Rango de fechas

Se soporta la selección de un rango de fechas.

:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`.

el alcance de fecha

escoger un alcance de fecha es apoyado.

:::demo cuando en la modalidad de fecha,los paneles izquierdos y derechoes son enlazados por defecto.Si queres los dos paneles combiar meses corrientes independientemente,puedes utilizar el atributo unlink-panels.

4c81a5c292

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value6"
      type="daterange"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With quick options</span>
    <el-date-picker
      v-model="value7"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      :picker-options="pickerOptions2">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: 'Last week',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: 'Last month',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: 'Last 3 months',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value6: '',
        value7: ''
      };
    }
  };
</script>

:::

<<<<<<< HEAD

Valor por defecto

Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar default-value para fijar otra fecha. Su valor debe ser definido por new Date().

Si el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo.

Valor defecto

Si el usuario no se recoge una fecha,monstra la fecha de hoy por defecto. Puedes utilizar default-value a establecer otra fecha. Su valor deber ser parseable por new Date().

Si el tipo es daterange,default-value establece el calendario del lado derecho.

4c81a5c292

:::demo

<template>
  <div class="block">
    <span class="demonstration">date</span>
    <el-date-picker
      v-model="value8"
      type="date"
      placeholder="Pick a date"
      default-value="2010-10-01">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">daterange</span>
    <el-date-picker
      v-model="value9"
      type="daterange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      default-value="2010-10-01">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value8: '',
        value9: ''
      };
    }
  };
</script>

:::

<<<<<<< HEAD

Formato del valor

De forma predeterminada, DatePicker emite el objet Date. Puede utilizar value-format para designar el formato del valor emitido, acepta la misma cadena de formato del atributo format.

:::warning Esta característica está en la etapa alfa. Feedback bienvenido.

Valor Formateado

Por defecto,DatePicker emite el objecto Date. Puedes utilizar value-format a designar el formato del valor emitido,acepta cadena del formato mismo del atributo format.

:::warning escenario Ésta característica es en alfa escenario.Bienvenivo a enviar realimentación.

4c81a5c292 :::

:::demo

<template>
  <div class="block">
    <span class="demonstration">Emits Date object</span>
    <div class="demonstration">Value: {{ value10 }}</div>
    <el-date-picker
      v-model="value10"
      type="date"
      placeholder="Pick a Date"
      format="yyyy/MM/dd">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Emits formatted date</span>
    <div class="demonstration">Value: {{ value11 }}</div>
    <el-date-picker
      v-model="value11"
      type="date"
      placeholder="Pick a Date"
      format="yyyy/MM/dd"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value10: '',
        value11: '',
      };
    }
  };
</script>

:::

<<<<<<< HEAD

Atributos

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
readonly	si DatePicker es solo de lectura	boolean	—	false
disabled	si DatePicker esta deshabilitado	boolean	—	false
size	tamaño del input	string	large/small/mini	—
editable	si el input es editable	boolean	—	true
clearable	si se muestra el boton de borrado	boolean	—	true
placeholder	placeholder cuando el modo NO es rango	string	—	—
start-placeholder	placeholder para la fecha de inicio en modo rango	string	—	—
end-placeholder	placeholder para la fecha final en modo rango	string	—	—
type	tipo de picker	string	year/month/date/datetime/ week/datetimerange/daterange	date
format	formato en que se muestra el valor en el input	string	año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss`	yyyy-MM-dd
align	alineación	left/center/right	left
popper-class	nombre de clase personalizada para el dropdown de DatePicker	string	—	—
picker-options	opciones adicionales, chequee la tabla debajo	object	—	{}
range-separator	separador de rangos	string	—	'-'
default-value	opcional, valor por defecto para el calendario	Date	cualquiera aceptado por `new Date()`	—
value-format	opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.	string	año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss`	—
name	igual que `name` en el input nativo	string	—	—
unlink-panels	desvincular los dos paneles de fecha en el range-picker	boolean	—	false

Opciones del Picker

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
shortcuts	{ text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente	object[]	—	—
disabledDate	una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano	function	—	—
firstDayOfWeek	primer dia de la semana	Number	1 to 7	7
onPick	una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`.	Function({ maxDate, minDate })	-	-

Accesso directo

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
text	título del acceso directo	string	—	—
onClick	una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())`	function	—	—

Eventos

Nombre	Descripción	Parametros
change	se dispara cuando el usuario confirma el valor	valor enlazado al componente
blur	se dispara cuando el input pierde el foco	(event: Event)
focus	se dispara cuando el input obtiene el foco	(event: Event)

Metodos

Metodo	Descripción	Parameteros
focus	coloca el foco en el input	—

=======

Atributos

Atributos	Descripción	Tipo	Valores aceptados	Valor por defecto
readonly	Si la escoja de fecha es lectura sola	boolean	—	false
disabled	Si la escoja de fecha es deshabilitada	boolean	—	false
size	tamaño de la entrada	string	large/small/mini	—
editable	Si la entrada es editable	boolean	—	true
clearable	Si monstrar el botón de despejar	boolean	—	true
placeholder	placeholder en la modalidad sin-rango	string	—	—
start-placeholder	placeholder para el comienzo de fecha en la modalidad de alcance	string	—	—
end-placeholder	placeholder para el fin de fecha en la modalidad de alcance	string	—	—
type	tipo de la escoja	string	año/mes/fecha/fecha y hora/semana/rango de fecha y hora /rango de fecha	fecha
formato	formato del valor desplegado en la caja de entrada	cadena	año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss`	yyyy-MM-dd
alinear
alineación	izquierda/centro/derecho	izquierda
popper-class	nombre de clase clientela por dropdown de DatePicker	cadena	—	—
picker-options	opciones adicionales, comproba la tabla abaja	objeto	—	{}
range-separator	separador de alcance	cadena	—	'-'
default-value	fecha opcional y defectada del calendario	Fecha	cualquier cosa aceptada por `new Date()`	—
value-format	opcional,formato de valor atado.Si no special, el valor atado sería ser un valor de fecha	cadena	año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss`	—
name	igual que `name` en la entrada nativa	cadena	—	—
unlink-panels	desconectar dos fecha-paneles en alcance-escoja	boolean	—	falso

Picker Options

Atributo	Descripción	Tipo	Valores aceptados	Defecto
shortcuts	un { text, onClick } objecto serie para establecer opciones atajos, comprobar la mesa abaja	objeto[]	—	—
disabledDate	una función determinar si la fecha es minusválida con la fecha como su parámetro.Debería devolver un booleano	función	—	—
firstDayOfWeek	primera día de semana	Number	1 to 7	7
onPick	una llama de vuelta cuando la fecha escogida está cambiada. Solamente por `daterange` y `datetimerange`.	Function({ fecha, minDate })	-	-

shortcuts

Atributo	Descripción	Tipo	Valores aceptados	Defecto
text	título del atajo	cadena	—	—
onClick	función de llama de vuelta, gatillos cuando el atajo se hace clic, con el `vm` como su parámetro. Puedes cambiar el valor de escoja por emitir el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())`	function	—	—

Eventos

Nombre de evento	Descripción	Parámetros
change	gatillos cuando usuario confirma el valor	valor atado de componente
blur	gatillos cuando la entrada difumina	(event: Event)
focus	gatillos cuando la entrada enfoca	(event: Event)

Métodos

Método	Descripción	Parámetros
focus	enfoque la entrada de componente	—

4c81a5c292

19 KiB Raw Blame History

DatePicker

Ingresar Fecha

:::demo La medida está determinada por el atributo type . Puede habilitar las opciones rápidas creando un objeto picker-options con la propiedad shortcuts. La fecha desactivada se ajusta mediante disabledDate, que es una función.

Entrar fecha

Otras mediciones

Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar.

Otras medidas

Rango de fechas

:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo unlink-panels.

el alcance de fecha

Valor por defecto

Si el tipo es daterange, default-value establece el calendario del lado izquierdo.

Valor defecto

Formato del valor

:::warning Esta característica está en la etapa alfa. Feedback bienvenido.

Valor Formateado

Atributos

Opciones del Picker

Accesso directo

Eventos

Metodos

Atributos

Picker Options

shortcuts

Eventos

Métodos

19 KiB

Raw Blame History

:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función.

:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`.

Si el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo.