element-plus/date-picker.md at 6bdff0028509d735f3115b588aad8089e6b62098

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

perf(date-picker): shortcuts support function type (#2617 )

re #2598

2021-07-22 17:49:52 +08:00

18 KiB

Raw Blame History

DatePicker

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 . You can enable quick options via shortcuts property. La fecha desactivada se ajusta mediante disabledDate, que es una función.

<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"
      :disabled-date="disabledDate"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
</template>

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

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: 'Today',
            value: new Date(),
          },
          {
            text: 'Yesterday',
            value: () => {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
          },
          {
            text: 'A week ago',
            value: () => {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
          },
        ],
        value1: '',
        value2: '',
      });

      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

Otras mediciones

Puede elegir la semana, el mes, el año o varias fechas ampliando el componente estándar del selector de fechas.

:::demo

<div class="container">
  <div class="block">
    <span class="demonstration">Week</span>
    <el-date-picker
      v-model="value1"
      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="value2"
      type="month"
      placeholder="Pick a month">
    </el-date-picker>
  </div>
</div>
<div class="container">
  <div class="block">
    <span class="demonstration">Year</span>
    <el-date-picker
      v-model="value3"
      type="year"
      placeholder="Pick a year">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Dates</span>
    <el-date-picker
      type="dates"
      v-model="value4"
      placeholder="Pick one or more dates">
    </el-date-picker>
  </div>
</div>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: ''
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        value1: '',
        value2: '',
        value3: '',
        value4: '',
      });

      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

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.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      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="value2"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shortcuts: [{
          text: 'Last week',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        }, {
          text: 'Last month',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        }, {
          text: 'Last 3 months',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        }],
        value1: '',
        value2: ''
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        shortcuts: [
          {
            text: 'Last week',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            },
          },
          {
            text: 'Last month',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            },
          },
          {
            text: 'Last 3 months',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            },
          },
        ],
        value1: '',
        value2: '',
      });

      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

Rango de mes

Se admite la selección de un intervalo de un mes.

:::demo Cuando se encuentra en el modo de rango, los paneles izquierdo y derecho están enlazados de forma predeterminada. Si desea que los dos paneles cambien de año en curso de forma independiente, puede utilizar el atributo unlink-panels.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="monthrange"
      range-separator="To"
      start-placeholder="Start month"
      end-placeholder="End month">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With quick options</span>
    <el-date-picker
      v-model="value2"
      type="monthrange"
      unlink-panels
      range-separator="To"
      start-placeholder="Start month"
      end-placeholder="End month"
      :shortcuts="shortcuts"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shortcuts: [{
          text: 'This month',
          value: [new Date(), new Date()],
        }, {
          text: 'This year',
          value: () => {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            return [start, end]
          },
        }, {
          text: 'Last 6 months',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            return [start, end]
          },
        }],
        value1: '',
        value2: ''
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        shortcuts: [
          {
            text: 'This month',
            value: [new Date(), new Date()],
          },
          {
            text: 'This year',
            value: () => {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              return [start, end];
            },
          },
          {
            text: 'Last 6 months',
            value: () => {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              return [start, end];
            },
          },
        ],
        value1: '',
        value2: '',
      });

      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

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.

:::demo

<template>
  <div class="block">
    <span class="demonstration">date</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a date"
      :default-value="new Date(2010, 9, 1)">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">daterange</span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: ''
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const value1 = ref('');
      const value2 = ref('');

      return {
        value1,
        value2,
      };
    },
  });

</setup>
-->

:::

Formatos de Date

Utilice format para controlar el formato del texto visualizado en el input. Utilice value-format para controlar el formato del valor vinculado.

Por defecto, el componente acepta y emite un objeto Date.

Check the list here of all available formats of Day.js.

:::warning Preste atención a la capitalización :::

:::demo

<template>
  <div class="block">
    <span class="demonstration">Emits Date object</span>
    <div class="demonstration">Value: {{ value1 }}</div>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="Pick a Date"
      format="YYYY/MM/DD">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Use value-format</span>
    <div class="demonstration">Value：{{ value2 }}</div>
    <el-date-picker
      v-model="value2"
      type="date"
      placeholder="Pick a Date"
      format="YYYY/MM/DD"
      value-format="YYYY-MM-DD">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Timestamp</span>
    <div class="demonstration">Value：{{ value3 }}</div>
    <el-date-picker
      v-model="value3"
      type="date"
      placeholder="Pick a Date"
      format="YYYY/MM/DD"
      value-format="x">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: ''
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const value1 = ref('');
      const value2 = ref('');
      const value3 = ref('');

      return {
        value1,
        value2,
        value3,
      };
    },
  });

</setup>
-->

:::

Hora por defecto para comienzo y fin de fecha

Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de inicio y la fecha final.

:::demo Por defecto, la hora de la fecha de inicio y final es 00:00:00. Configurar default-time puede cambiar la hora respectivamente. Acepta un array de Date dos cadenas. La primera cadena fija la hora para la fecha de inicio y la segunda para la fecha final.

<template>
  <div class="block">
    <p>Component value：{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start date"
      end-placeholder="End date"
      :default-time="defaultTime"
    ></el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        defaultTime: [
          new Date(2000, 1, 1, 0, 0, 0),
          new Date(2000, 2, 1, 23, 59, 59)
        ] // '00:00:00', '23:59:59'
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const value = ref('');
      const defaultTime = ref([
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ]); // '00:00:00', '23:59:59'

      return {
        value,
        defaultTime,
      };
    },
  });

</setup>
-->

:::

Localization

The default locale of is English, if you need to use other languages, please check Internationalization

Note, date time locale (month name, first day of the week ...) are also configed in localization.

Atributos

Atributo	Descripción	Tipo	Valores aceptados	Por defecto
model-value / v-model	valor enlazado	date(DatePicker) / array(DateRangePicker)	—	—
readonly	si DatePicker es solo de lectura	boolean	—	false
disabled	si DatePicker esta deshabilitado	boolean	—	false
size	tamaño del input	string	large/medium/small/mini	large
editable	si el input es editable	boolean	—	true
clearable	si se muestra el botón 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/dates/datetime/ week/datetimerange/daterange/ monthrange	date
format	formato en que se muestra el valor en el input	string	ver date formats	yyyy-MM-dd
popper-class	nombre de clase personalizada para el dropdown de DatePicker	string	—	—
range-separator	separador de rangos	string	—	'-'
default-value	opcional, valor por defecto para el calendario	Date	cualquiera aceptado por `new Date()`	—
default-time	optional, the time value to use when selecting date range	Date[]	Array with length 2, each item is a Date. The first item for the start date and then second item for the end date	—
value-format	opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date.	string	ver date formats	—
name	igual que `name` en el input nativo	string	—	—
unlink-panels	desvincular los dos paneles de fecha en el range-picker	boolean	—	false
prefix-icon	Clase personalizada para el icono prefijado	string	—	el-icon-date
clear-icon	Clase personalizada para el icono `clear`	string	—	el-icon-circle-close
disabledDate	una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano	function	—	—
shortcuts	un array de objetos para establecer opciones de acceso directo	object[{ text: string, value: 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	instancia del componente
focus	se dispara cuando el input obtiene el foco	instancia del componente

Metodos

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

Slots

Name	Description
range-separator	Separador de los rangos personalizado

18 KiB Raw Blame History Unescape Escape

DatePicker

Ingresar Fecha

Otras mediciones

Rango de fechas

Rango de mes

Valor por defecto

Formatos de Date

Hora por defecto para comienzo y fin de fecha

Localization

Atributos

Eventos

Metodos

Slots

18 KiB

Raw Blame History