本文介绍如何使用 vue2-daterangepicker-component，这是一个方便的日期选择组件，可用于 Vue.js 应用程序。
安装
使用 npm 安装 vue2-daterangepicker-component：
npm install vue2-daterangepicker-component
使用
在应用程序中导入 daterangepicker：
import DateRangePicker from 'vue2-daterangepicker-component'
export default {
components: {
DateRangePicker
}
}接着，使用 <date-range-picker> 组件即可：
-- -------------------- ---- -------
----------
-----
------------------
-----------------------
-------------------
-----------------------
--------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ---
-------- --
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------可以通过 props 来定制日期选择器的样式和行为：
-- -------------------- ---- ------- ------------------ ----------------------- ------------------- ---------------- ---------------- -------------- ------------------------------ ------------------------------------------ -------------------------- ------------------------ -------------------------- -------------------------- ----------------------- --------------------
使用我们自己定义的样式修改日期选择器的外观：
-- -------------------- ---- ------- ------- ---------------- - ----------------- -------- ------- --- ----- ----- -------- ---- ------------ ------ ---------- ----- - ---------------- --------------- - ------ --------- - --- ----------- ------- - ---------------- ------- -- --------- - ----------------- -------- ------ ----- - ---------------- --------- - ----------------- -------- ------ ----- - --------
选项
locale
date-picker 可以使用多种语言和格式。默认情况下，它使用英文，但您可以使用其他语言：
-- -------------------- ---- -------
------------------
-----------------------
-------------------
------------------
-----------------------
--------------------
--------
------ - -------- - ---- --------------------------------------------
------ ------- -
------ -
------ -
--------- --------
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------ranges
-- -------------------- ---- -------
------------------
-----------------------
-------------------
----------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
------- -
----- ---------- ----------
----- --------------------- -------- -------------------- ---------
------- --------------------- -------- ----------
-------- ---------------------- -------- ----------
------ --------------------------- -------------------------
------ --------------------- -------------------------- -------------------- -------------------------
----- -------------------------- ------------------------
----- --------------------- ------------------------ -------------------- ----------------------
-
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------opens
-- -------------------- ---- -------
------------------
-----------------------
-------------------
--------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
------ -------
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------showDropdowns
-- -------------------- ---- -------
------------------
-----------------------
-------------------
------------------------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
-------------- ----
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------alwaysShowCalendars
-- -------------------- ---- -------
------------------
-----------------------
-------------------
------------------------------------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
-------------------- ----
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------buttonClass
-- -------------------- ---- -------
------------------
-----------------------
-------------------
--------------------------
------------------------
--------------------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
------------ --------------
----------- ---
------------ --
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------placeholder
-- -------------------- ---- -------
------------------
-----------------------
-------------------
--------------------
-----------------------
--------------------
--------
------ ------- -
------ -
------ -
-------------------- ----
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------结尾
到此，我们已经学会了使用 vue2-daterangepicker-component。它提供了很多选项和自定义，可以方便地处理大部分的日期选择需求。如果您在开发中遇到任何问题，请随时与作者取得联系，作者将竭力为您提供帮助。
示例代码
-- -------------------- ---- -------
----------
-----
------------------
-----------------------
-------------------
------------------
----------------
--------------
------------------------------
------------------------------------------
--------------------------
------------------------
--------------------------
--------------------
-----------------------
--------------------
------
-----------
--------
------ --------------- ---- --------------------------------
------ - -------- - ---- --------------------------------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
---------- ---
-------- ---
--------- ---------
------- -
----- ---------- ----------
----- --------------------- -------- -------------------- ---------
------- --------------------- -------- ----------
-------- ---------------------- -------- ----------
------ --------------------------- -------------------------
------ --------------------- -------------------------- -------------------- -------------------------
----- -------------------------- ------------------------
----- --------------------- ------------------------ -------------------- ----------------------
--
------ --------
-------------- -----
-------------------- -----
------------ --------------
----------- ---
------------ --
-
--
-------- -
------------------- -
-------------- - ---------------
------------ - -------------
-
-
-
---------
-------
---------------- -
----------------- --------
------- --- ----- -----
-------- ----
------------ ------
---------- -----
-
---------------- --------------- -
------ --------- - ---
----------- -------
-
---------------- ------- -- --------- -
----------------- --------
------ -----
-
---------------- --------- -
----------------- --------
------ -----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b681e8991b448df000