[Frontend] WeUI DatePicker time component binding method and chatGPT answer

2023, Week 33, Article 1. Give yourself a goal, and then insist that there will always be a receipt, if you don’t believe me, try it!
WeUI DatePicker, this component is rarely used in pure html static file js, and I forgot how to set the default binding value, so I used chatGPT to find the answer.
It turns out that when chatGPT does not find the correct answer, it will write it by itself according to programming thinking. Corrected several times but it was wrong.

insert image description here

1. Mobile framework

The following is a simple arrangement of some common mobile terminal frameworks

1.1、React Native

React-based mobile application development framework, which can use JavaScript to write cross-platform native applications.

1.2、Flutter

The UI framework developed by Google can use the Dart language to build high-performance, beautiful cross-platform applications.

1.3、Ionic

An Angular-based open source mobile app development framework to build hybrid apps using HTML, CSS, and JavaScript.

1.4、Framework7

A full-featured HTML framework for building iOS and Android applications, providing rich UI components and animation effects.

1.5、Weex

The cross-platform mobile development framework developed by Alibaba can use Vue.js to write applications and render them into native components.

1.6、NativeScript

An open source framework for building native mobile applications using JavaScript, TypeScript and Angular, supporting iOS and Android.

1.7、jQuery Mobile

A jQuery-based HTML5 mobile application development framework that provides rich UI components and interactive effects.

These frameworks use different technology stacks and development methods, and you can choose a suitable framework for mobile application development according to specific needs and personal preferences.

2. WeUI framework

WeUI is a mobile UI framework developed by the Tencent team, which aims to provide simple and easy-to-use interface components for mobile application development.

Simply sort out some basic knowledge of the WeUI framework

2.1. Design style

WeUI follows a simple and plain design style, focusing on user experience and ease of use. It provides a series of common mobile UI components, such as buttons, forms, lists, navigation, etc.

2.2. Components

The WeUI framework is composed of multiple independent components, each with unique styles and functions. Common components include buttons, labels, icons, forms, lists, dialogs, and more.

2.3, style library

WeUI provides a set of CSS style libraries, which can be directly imported into the project for use. The style library defines the style and layout specifications of each component, enabling developers to quickly build a consistent mobile application interface.

2.4. Responsive layout

The components of WeUI adopt a responsive layout, which can adapt to different screen sizes and devices. This enables a consistent user experience across different mobile devices.

2.5. How to use

Using the WeUI framework, components can be enabled by introducing corresponding style files and JavaScript files. By using specified CSS class names in HTML, different components and styles can be used.

2.6. Customizability

The WeUI framework provides some customization options, and developers can customize the style and functions according to their needs. This enables developers to flexibly expand and customize according to project needs.

In general, WeUI is a convenient and fast mobile UI framework designed to help developers build elegant and easy-to-use mobile application interfaces.
By using the WeUI framework, developers can save development time and improve development efficiency.
Understanding the basics of WeUI can help developers better use and customize the framework.

3. Time component type

WeUI Picker is a mobile-based UI component library for selecting or entering various values, dates, times and other information.
It provides a wealth of selector styles and interaction methods to facilitate developers to implement various selection functions in mobile applications.
In WeUI Picker, common selectors include

3.1, single column selector (Single Picker)

Used to select a value from a given set of options.

3.2, multi-column selector (Multi Picker)

It is used to select linkage values ​​in multiple columns, such as a three-level linkage selector for provinces and cities.

3.3. Time Picker

Used to select a specific time, you can choose hours, minutes, seconds, etc.

3.4. Date Picker

Used to select a specific date, you can choose year, month, day, etc.

3.5. Range Picker

Interval range for selecting values ​​or times.

WeUI Picker provides a concise and clear API interface and rich configuration options, which can be flexibly customized and expanded according to actual needs.
It is suitable for mobile web development based on HTML5 and CSS3, and can be used in combination with various frameworks (such as Vue.js, React, etc.) to facilitate developers to quickly build user-friendly mobile application interfaces.

Fourth, bind the default value

4.1, correct binding method

The correct way to bind the default value is to separate the year, month and day.
In fact, WeUI DatePicker can defaultValueset the default value through the property.

  • The following is the correct way to write:
weui.datePicker({
    
    
    defaultValue: [2023, 8, 2], // 设置默认值为 [年, 月, 日]
    onChange: function(result) {
    
    
        console.log(result);
    }
});

In this example, we use defaultValuethe attribute to set the default value to [2023, 8, 2], which represents August 2, 2023.
When the user opens the date picker, this date will be displayed by default, and the user can also select other dates.

Note that the range of months is 0-11, so 8 represents September. The value range of date is 1-31.

4.2, ChatGPT wrong answer

I have consulted many times, but the answers are all wrong. This also shows that chatGPT will make up programs by itself. When using this, it is only used as a reference tool.

  • 1) wrong answer
    insert image description here

  • 2) wrong answerinsert image description here

  • 3) wrong answerinsert image description here

Guess you like

Origin blog.csdn.net/lmy_520/article/details/132226534