Zepto-based lightweight date plug-in for mobile terminals -- date_picker_jquery

This article mainly introduces the zepto-based lightweight date plug-in for mobile terminals-date_picker. For more information, see Preface

Those who have worked in mobile Web development know that date selection on mobile terminals is a common requirement. On the PC end, we have a wide range of options, including Mobiscroll and jQuery UI Datepicker. In my opinion, there are two obvious problems with these plug-ins. The first is heavy dependencies. For jQuery plug-ins, they have been forced to rely on more than 80 k giants, and many mobile projects have been rejected; second, it is too powerful. Many plug-ins spend 80% of their time improving plug-in 20%'s cool additional features, resulting in larger code volumes and complicated configuration. Therefore, a plug-in that is less dependent, lightweight, and easy to use on the mobile end date is very necessary. This article briefly introduces date_picker, a lightweight zepto-based mobile date plug-in recently written.

Plug-in Design Principles

Retain only the most necessary functions

The date selection plug-in allows you to select the year, month, and day, and provides the necessary year-to-year switching animation effects. For the minimum time, maximum time, and topic customization, this plug-in is not available.

Reserve necessary Dependencies

Although this plug-in is based on zepto, it actually depends on a relatively good library fastclick on Github. We know that there are two common problems in processing click events on the Mobile End: (1) click events on the mobile end are 300 ms, and touch events are usually used instead of click events to improve sensitivity; (2) touch events may cause penetration issues. Generally, plug-ins do not need touch events. Based on these two problems, fastclick is compatible, you only need to call the api provided by it to call the click event as happily as you did before. Therefore, this dependency cannot be saved. As for zepto dependency, it is actually dispensable. Once a blogger writes native js at ordinary times and doesn't feel much like a plug-in, the plug-in will be less visible to the public. However, since zepto is already the same as zepto on PC, zepto is not welcome to use it.

It supports both modular and local file reference

A longer plug-in basically allows you to download a file and then reference it with a script. This is understandable, but it is not necessary to put the largest package manager npm. I am not sorry for the title of the webpage. Therefore, this plug-in supports file reference and CMD mode module reference.

Features

Direct:

Technical details

TransitionEnd event

The main panel of the plug-in is the number of days of the current month. If you click the plug-in of the previous month or the next month, you need to calculate the number of days of the previous month or the next month and insert it to the DOM node. After being inserted to the DOM node, you need to use the animation effect to display the latest month of January and fade away from the old one. The method used is CSS2d conversion and transition. What we need to deal with is to delete it from the DOM tree in time when the old month fades out of sight. Otherwise, if the user keeps clicking Next month or the previous month, the memory will blow up. To implement this removal function, you can use the setTimeout event to delete a node at a specific time, it is found that this method is not feasible because of the inaccuracy of the Javascript timer and the increase in the logic complexity brought about by the one-month switch.
Therefore, this plug-in adopts the second solution: transitionEnd event. Directly reference the introduction of MDN:

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire. The event will also not fire if the animated element becomes display: none before the transition fully completes.

That is, as long as you do not randomly tamper with the CSS attributes of elements, you can perform the corresponding operations (delete nodes) when the animation is complete ).
Let's take a look at compatibility:

Mobile Web development is sufficient!

Finally, there is a compatibility issue in binding events. Different vendors have different definitions for this event. For example, in IOS, the event is a transitionend event, but in Android, the event listening for the transitionend event is completely unresponsive, after some Google attacks, Android needs to listen to the webkitTransitionEnd event. To solve compatibility issues when binding events, you need to check which events the browser supports. The following is a code snippet of the Q & A in Stackoverflow:

 function whichTransitionEvent() {  var t,   el = document.createElement('fakeelement');   transitions = {    'OTransition'  :'oTransitionEnd',    'MSTransition'  :'msTransitionEnd',    'MozTransition'  :'transitionend',    'WebkitTransition' :'webkitTransitionEnd',    'transition'   :'transitionEnd'   };  for(t in transitions){   if( el.style[t] !== undefined ){    return transitions[t];   }  }  return false; }

Installation and Use

Install

The following two methods are supported:

1. Git clonedirectly uses the datepicker.min.css and datepicker. min. js under the binfolder.
2. Download and install from npm: npm install -- save date_picker
   

Use

Reference sample datepicker.min.css
Reference datepicker. min. js or reference module var DatePicker = require ('date _ picker ');
Instantiate the component and bind the callback function after the plug-in date is selected.

var _date = document.getElementById('date'); var datePicker = new DatePicker({  confirmCbk: function(data) {   _date.value = data.year + '-' + data.month + '-' + data.day;  } }); _date.onfocus = function(e) {  _date.blur();  datePicker.open(); };

Plug-in has two external APIs: open and close. Note that the _ date in the demo above forces the focus to be removed after the focus is obtained, this is to prevent the native keyboard pop-up from being disabled by setting the readonly attribute for the input tag under android.