jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

下面我将详细讲解“jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载”的完整攻略。

概述

datedropper和timedropper是基于jQuery的移动端日期和时间选择器，简单易用且易于自定义样式。此外，它们还支持多种语言和格式。

安装

在使用datedropper和timedropper之前，需要先下载相关文件，并在页面中引入相关的CSS和JS文件。下载方式可以通过官网的下载链接：https://felicegattuso.com/projects/datedropper/ ，下载后解压，将文件夹中的datedropper.min.css和datedropper.min.js或者timedropper.min.css和timedropper.min.js复制到自己的项目中，并在HTML页面的标签中导入。

<head>
  <link rel="stylesheet" type="text/css" href="path/to/datedropper.min.css">
  <script type="text/javascript" src="path/to/jquery.min.js"></script>
  <script type="text/javascript" src="path/to/datedropper.min.js"></script>
</head>

日期选择器

基本使用

以下是一个基本使用datedropper的例子。

<input type="text" id="date" name="date">

<script>
  $(document).ready(function() {
    $('#date').dateDropper();
  });
</script>

通过调用dateDropper()方法，将日期选择器应用到id为date的文本框中。

自定义设置

datedropper支持许多自定义设置，如日期格式、最小日期和最大日期、语言、主题等。下面是一些常用设置的例子。

修改日期格式

<input type="text" id="date" name="date">

<script>
  $(document).ready(function() {
    $('#date').dateDropper({
      format: 'd-m-Y'
    });
  });
</script>

设置最小日期和最大日期

<input type="text" id="date" name="date">

<script>
  $(document).ready(function() {
    $('#date').dateDropper({
      minDate: '01-01-2020',
      maxDate: '31-12-2020'
    });
  });
</script>

修改语言

<input type="text" id="date" name="date">

<script>
  $(document).ready(function() {
    $('#date').dateDropper({
      lang: 'zh'
    });
  });
</script>

修改主题

<input type="text" id="date" name="date">

<script>
  $(document).ready(function() {
    $('#date').dateDropper({
      theme: 'my_theme'
    });
  });
</script>

源码

以下是一个完整的datedropper示例代码。

<!DOCTYPE html>
<html>
<head>
  <title>Datedropper Example</title>
  <link rel="stylesheet" type="text/css" href="path/to/datedropper.min.css">
  <script type="text/javascript" src="path/to/jquery.min.js"></script>
  <script type="text/javascript" src="path/to/datedropper.min.js"></script>
</head>
<body>
  <input type="text" id="date" name="date">

  <script>
    $(document).ready(function() {
      $('#date').dateDropper({
        format: 'd-m-Y',
        minDate: '01-01-2020',
        maxDate: '31-12-2020',
        lang: 'zh',
        theme: 'my_theme'
      });
    });
  </script>
</body>
</html>

时间选择器

基本使用

以下是一个基本使用timedropper的例子。

<input type="text" id="time" name="time">

<script>
  $(document).ready(function() {
    $('#time').timeDropper();
  });
</script>

通过调用timeDropper()方法，将时间选择器应用到id为time的文本框中。

自定义设置

timedropper也支持各种自定义设置，如时间格式、24小时制、最小时间和最大时间等。下面是一些常用设置的例子。

修改时间格式

<input type="text" id="time" name="time">

<script>
  $(document).ready(function() {
    $('#time').timeDropper({
      format: 'HH:mm'
    });
  });
</script>

修改为24小时制

<input type="text" id="time" name="time">

<script>
  $(document).ready(function() {
    $('#time').timeDropper({
      meridians: false
    });
  });
</script>

设置最小时间和最大时间

<input type="text" id="time" name="time">

<script>
  $(document).ready(function() {
    $('#time').timeDropper({
      minTime: '09:00',
      maxTime: '18:00'
    });
  });
</script>

源码

以下是一个完整的timedropper示例代码。

<!DOCTYPE html>
<html>
<head>
  <title>Timedropper Example</title>
  <link rel="stylesheet" type="text/css" href="path/to/timedropper.min.css">
  <script type="text/javascript" src="path/to/jquery.min.js"></script>
  <script type="text/javascript" src="path/to/timedropper.min.js"></script>
</head>
<body>
  <input type="text" id="time" name="time">

  <script>
    $(document).ready(function() {
      $('#time').timeDropper({
        format: 'HH:mm',
        meridians: false,
        minTime: '09:00',
        maxTime: '18:00'
      });
    });
  </script>
</body>
</html>

总结

以上就是使用datedropper和timedropper的完整攻略。它们是一款方便易用的日期和时间选择器，而且还支持许多自定义设置。希望这篇文章能够帮助你快速了解如何使用这两个插件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载 - Python技术站

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

概述

安装

日期选择器

基本使用

自定义设置

源码

时间选择器

基本使用

自定义设置

源码

总结

相关文章