NPM包cordova-plugin-datetimepicker使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在移动应用中，日期时间选择器是一个很常见的组件。且在Hybrid App中，我们可以通过cordova进行封装为插件的形式。在此文章中，我们将介绍到cordova-plugin-datetimepicker这一实用的日期时间选择器插件。

安装

安装cordova-plugin-datetimepicker非常简便，只需要在项目目录中执行以下npm命令即可：

npm install cordova-plugin-datetimepicker --save

使用步骤

第一步：初始化插件

在我们可以使用cordova-plugin-datetimepicker之前，需要先为应用设置相关配置，以及在特定时机初始化插件：

-- -------------------- ---- -------
-- ------------------------
---------------------------------------- ------------------------- -------
-------- --------------- -
  -- -----
  ------------------------------------
      ---------------- -----
      --------------- ----
  -- -------- ---------
  ---
-

DateTimePicker.init方法传入了一个JSON对象作为参数，其中可以配置两个属性：

closeButtonName：可选参数，表示对于日期时间选择器的关闭按钮名称
doneButtonName：可选参数，表示对于日期时间选择器的完成按钮名称

第二步：展示日期时间选择器

在初始化完插件后，我们可以通过调用DateTimePicker.show方法，展示出日期时间选择器：

-- -------------------- ---- -------
-------- -------------------- -
  --- ----------- - --- -------
  ------------------------------------
      ----- -----------
      ----- ----------------------
      -------------- -----
      ----------------- -----
      -------- --------------------- - ------
      -------- --------------------- - ------
      ------- --------
      ------- -----
      ----------- -----
      ------------- -------------------------------------------------------------
  -- ---------------- -----------------
-

DateTimePicker.show方法同样传入一个JSON对象作为参数，其中常见的配置项有：

mode：必选参数，有 "date", "time", "datetime" 三种模式可供选择，表示日期时间选择器支持的类型

date：可选参数，表示默认选中的时间。定义如下：

var currentDate = new Date();//当前日期时间
window.plugins.DateTimePicker.show({
    ...
    date: currentDate.getTime(),
    ...
}, successCallback, failureCallback);

allowOldDates：可选参数，表示是否允许选择过去的日期时间。默认为 true
allowFutureDates：可选参数，表示是否允许选择将来的日期时间。默认为 true
minDate：可选参数，表示可选择的最小日期时间。默认为当前时间
maxDate：可选参数，表示可选择的最大日期时间。默认为当前时间
locale：可选参数，表示日期时间选择器的本地化。默认为 "en_US"
okText：可选参数，表示确认按钮名称。默认为 "Done"
cancelText：可选参数，表示取消按钮名称。默认为 "Cancel"
androidTheme：可选参数，表示Android平台的主题风格。默认为 window.plugins.DateTimePicker.ANDROID_THEMES.THEME_HOLO_LIGHT。

第三步：处理回调

在用户选择完日期时间后，需要进行相关的处理。只需为DateTimePicker.show方法传入成功和失败的回调函数即可，例如：

function successCallback(result) {
  alert("选择的日期时间为：" + result);
}
function failureCallback(error) {
  alert("日期时间选择器出错啦！" + error);
}

示例代码

完整代码如下：

-- -------------------- ---- -------
-- ------------------------
---------------------------------------- ------------------------- -------

-------- --------------- -
  -- -----
  ------------------------------------
      ---------------- -----
      --------------- ----
  -- -------- ---------
-

-------- -------------------- -
  --- ----------- - --- -------
  ------------------------------------
      ----- -----------
      ----- ----------------------
      -------------- -----
      ----------------- -----
      -------- --------------------- - ------
      -------- --------------------- - ------
      ------- --------
      ------- -----
      ----------- -----
      ------------- -------------------------------------------------------------
  -- ---------------- -----------------
-

-- ------
-------- ----------------------- -
  ----------------- - --------
-

-- ------
-------- ---------------------- -
  ------------------- - -------
-

结语

cordova-plugin-datetimepicker是一个非常实用的日期时间选择器插件，通过本文的介绍，您已经了解了如何安装、初始化以及调用该插件。希望本文对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005681e81e8991b448e4403