Home > Article > Web Front-end > How to select time control with jquery

How to select time control with jquery

WBOYOriginal: 2023-05-23 20:47:062001browse

With the development of the Internet, time selection controls are becoming more and more commonly used in web development. Among them, the jQuery time picker plug-in has obvious advantages in simple operation and beautiful effects, and is widely welcomed and supported by developers. This article will introduce how to use the jQuery time picker plug-in to help developers implement time selection controls faster and easier.

1. Introduction to the jQuery time picker plug-in

The jQuery time picker plug-in is a fast, flexible, cross-browser date and time picker plug-in that relies on the jQuery library and has adaptive, Easy to expand, beautiful style and other characteristics. It is simple to use, supports multiple languages, can be highly customized, and provides rich event callback functions. Developers only need to introduce relevant JS and CSS files and simply call them to implement the time selection control. Currently, there are multiple versions of the jQuery time picker plug-in. This article refers to the plug-in with version number 2.1.9.

2. Use of jQuery time picker plug-in

Introduce related files

First, you need to introduce the jQuery library and Related JS and CSS files of jQuery time picker plug-in.

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css">
</head>

HTML page layout

Next, add an input tag to the page as a container for the time picker.

<input type="text" class="timepicker" />

Among them, the class attribute value is timepicker, indicating that this input tag is a time picker.

Initialize the plug-in

Call the timepicker() method of the jQuery time picker plug-in to initialize the time picker.

$(document).ready(function() {
  $('.timepicker').timepicker();
});

Among them, the ready() method is used to ensure that the document has been fully loaded before executing the JavaScript code. The timepicker() method is used to initialize the time picker, which has various optional parameters and can be highly customized.

Advanced function usage

In addition to basic time selection, the jQuery time picker plug-in also provides many advanced functions, such as setting time format, setting minute interval, adding Time limits, change language, etc. Below, the implementation of these common functions will be introduced respectively.

(1) Set the time format

By setting the format attribute, you can set the format of the time selector. Formatting options can include date format, time format, and initial time (if you want to display the initial time, you need to set the corresponding time).

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd",
    dateTimeFormat: "yy-mm-dd HH:mm:ss",
    initialValue: "09:00"
  });
});

The above code sets the time format of the time selector to "HH:mm:ss", the date format to "yy-mm-dd", and the date time format to "yy-mm-dd HH:mm" :ss", the initial time is "09:00".

(2) Set the minute interval

By setting the step attribute, you can set the minute and second interval of the time selector, taking 15 minutes as an example:

$(function() {
  $("#timepicker").timepicker({
    step: 15 * 60  // 单位为秒
  });
});

The above code settings The minutes interval of the time picker is set to 15 minutes.

(3) Add time limit

By setting the minTime and maxTime attributes, you can limit the time range of the time selector, taking 9:00 to 17:00 as an example:

$(function() {
  $("#timepicker").timepicker({
    minTime: "9:00",
    maxTime: "17:00"
  });
});

The above code sets the earliest time of the time selector to 9:00 and the latest time to 17:00.

(4) Change the language

You can change the language of the time picker by setting the language pack.

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm",
    lang: "zh"
  });
});

The above code sets the time format of the time selector to "HH:mm" and the language to Chinese.

3. Summary

This article introduces how to use the jQuery time picker plug-in to implement a time selection control. By introducing relevant files, adding HTML page layout and initializing the plug-in, you can quickly create a beautiful and practical time picker. Additionally, the time picker can be further customized by setting advanced features such as time format, minute intervals, time limits, and language packs. Therefore, for developers who develop time pickers, learning to use the jQuery time picker plug-in is a very necessary skill.

The above is the detailed content of How to select time control with jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to write if judgment in nodejsNext article：How to write if judgment in nodejs

See more

How to select time control with jquery

Related articles