正文

新手必看！5款实用前端时间选择插件，告别手动输入烦恼

/0 浏览量
0516

在开发前端应用时，时间选择功能是一个常见的需求。然而，手动输入时间既繁琐又容易出错。为了帮助新手开发者节省时间和精力，下面将介绍5款实用且易于使用的前端时间选择插件，让你轻松实现时间选择功能。

1. Pickadate.js

Pickadate.js 是一款轻量级的时间选择插件，它支持多种时间格式，并且易于集成到任何项目中。以下是一个简单的示例代码：

<input type="text" class="picker" />
<script src="https://cdn.jsdelivr.net/pickadate.js/pickadate.min.js"></script>
<script>
  var picker = new Pickadate.DatePicker({
    el: '.picker',
    format: 'yyyy-mm-dd',
    selectYears: 100,
    selectMonths: true,
    today: 'Today',
    clear: 'Clear',
    close: 'Close'
  });
</script>

2. DateTimePicker

DateTimePicker 是一款功能强大的时间选择插件，支持日期、时间、日期时间等多种格式。以下是一个简单的示例代码：

<input type="text" id="datetimepicker" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datetimepicker@4.17.47/build/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdn.jsdelivr.net/npm/datetimepicker@4.17.47/build/js/bootstrap-datetimepicker.min.js"></script>
<script>
  $('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd hh:ii',
    autoclose: true,
    todayHighlight: true
  });
</script>

3. Timepicker

Timepicker 是一款简单易用的单时间选择插件，支持多种时间格式和自定义选项。以下是一个简单的示例代码：

<input type="text" id="timepicker" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.3.12/dist/css/timepicker.min.css" />
<script src="https://cdn.jsdelivr.net/npm/timepicker@1.3.12/dist/js/timepicker.min.js"></script>
<script>
  $('#timepicker').timepicker({
    timeFormat: 'hh:mm tt',
    interval: 30,
    scrollbar: true
  });
</script>

4. jQuery UI Datepicker

jQuery UI Datepicker 是一款经典的时间选择插件，支持多种日期格式和自定义选项。以下是一个简单的示例代码：

<input type="text" id="datepicker" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  });
</script>

5. Flatpickr

Flatpickr 是一款简洁美观的时间选择插件，支持多种日期、时间、日期时间格式，并且易于定制。以下是一个简单的示例代码：

<input type="text" id="flatpickr" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  $('#flatpickr').flatpickr({
    dateFormat: 'Y-m-d',
    enableTime: true,
    time_24hr: true
  });
</script>

通过以上5款插件，新手开发者可以轻松实现时间选择功能，提高开发效率。希望这些插件能帮助你告别手动输入的烦恼！

-- 展开阅读全文 --