Shulou(Shulou.com)06/01 Report--

This article mainly introduces what problems should be paid attention to when using datepicker and datetimepicker of amaze-ui in html5. The article is very detailed and has certain reference value. Friends who are interested must finish reading it!

Here are some references about the plug-in amaze-ui:

Point 1: the reference document cannot be selected incorrectly. The default document for amaze is http://amazeui.shopxo.net/getting-started/, but when we want to use datetimepicker, we need to use https://github.com/amazeui/datetimepicker.

This is what I want to complain about, amaze even put datetimepicker in an inconspicuous small corner, this is what we need to pay attention to.

The date-time plug-in for point 2:amaze-ui is really not good-looking and extensible, especially when it comes to controlling time. Can we not use this in our project? I use this only after someone else has used it this time.

It turned out to be really hard.

Point 3: three time (datetimepicker) check:

Jsp key code:

Business card printing time effective time expiration time

Js check code:

In order to make everyone see clearly, I use a more ingenious technique here. Because it is a three-date check, the start time parameter can only be setStartTime, and the end parameter can only be setEndTime, so you cannot initialize it in the entry function of jq. You need to call two functions in the entry function of jq to initialize it. The code is as follows:

InitDatePicker = function () {/ / date plug-in initialization $('# gender') .datetimepicker ({language: 'zh-CN', format:' yyyy-mm-dd hh:ii:ss', minView: 2 / / pickerPosition: "bottom-left"}) .on ("changeDate") Function (ev) {/ / value change event if (ev.date) {$("# startDate") .datetimepicker ('setStartDate', new Date (ev.date.valueOf () } else {$("# startDate") .datetimepicker ('setStartDate', null);}}) Datetimepicker ({language: 'zh-CN', format:' yyyy-mm-dd hh:ii:ss', minView: 2 / / pickerPosition: "bottom-left"}) .on ("changeDate", function (ev) {if (ev.date) {$("# gender"). Datetimepicker ('setEndDate', new Date (ev.date.valueOf () } else {$("# gender") .datetimepicker ('setEndDate', new Date ();}}); $(' # gender,#startDate') .click (function () {$(this) .datetimepicker ("show");})} InitDatePicker1 = function () {$('# startDate'). Datetimepicker ({language: 'zh-CN', format:' yyyy-mm-dd hh:ii:ss', minView: 2 / / pickerPosition: "bottom-left"}) .on ("changeDate", function (ev) {if (ev.date) {$("# expDate"). Datetimepicker ('setStartDate') New Date (ev.date.valueOf ()) } else {$("# expDate") .datetimepicker ('setStartDate', new Date ();}}) Datetimepicker ({language: 'zh-CN', format:' yyyy-mm-dd hh:ii:ss', minView: 2 / / pickerPosition: "bottom-left"}) .on ("changeDate", function (ev) {if (ev.date) {$("# startDate"). Datetimepicker ('setEndDate', new Date (ev.date.valueOf () } else {$("# startDate") .datetimepicker ('setEndDate', null);}); $(' # startDate,#expDate') .click (function () {$(this) .datetimepicker ("show");})}

Note:

The use of minView in datetimepicker, which is the minimum display view of the control plug-in, minView=2 indicates that the minimum choice is a good number, there is no time to choose, and the default is to choose to seconds; while the corresponding setting in datepicker is minViewMode, I was fooled once.

Finally, to add, in the development of amaze time plug-ins, I suggest unified use of datetimepicker, it is more universal than datepicker, in the time range control is more flexible, we only need to use minView to control the minimum display.

The above is all the contents of this article entitled "what do you need to pay attention to when using datepicker and datetimepicker of amaze-ui in html5?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.