Zepto-based mobile end lightweight date plugin--date_picker_jquery

Objective

Mobile Web development students know that mobile end date selection is a very common requirement. On the PC side, we have a lot of choices, and the more famous one is the Mobiscroll and jquery UI DatePicker. Personally, these plug-ins exist two obvious problems, the first is heavy reliance on jquery plug-ins, has been forced to rely on more than 80 k of the Giants, put a lot of mobile projects shut out; the second is too powerful a function, Many plug-ins spend 80% of the time to improve the plug-in 20% cool extra features, resulting in large code change, configuration complex. So a less dependent, lightweight and easy to use mobile end date to choose Plug-ins is very necessary. This article briefly describes a recently written Zepto mobile-side lightweight date plugin--date_picker.

Plug-in design principles

Retain only the most necessary features

Date Selection plug-in is nothing more than the year, month, Day choice, and to provide the necessary years to switch animation effects, as to what the minimum time, maximum time, theme customization, is not the scope of this plug-in function.

Retain the necessary Reliance

Although this plug-in is based on Zepto, actually also implicitly rely on the GitHub above a comparison of cattle library Fastclick. We know that mobile end Click event Processing has two common problems: (1) Mobile End Click event has 300ms, usually use touch events instead of click events to improve sensitivity; (2) Touch events will have a penetrating problem, the general plug-ins do not touch the event Based on these two issues, Fastclick is compatible, and simply call the API it provides to be able to invoke the Click event as it would otherwise, so this dependency cannot be saved. As for relying on Zepto, is actually dispensable, one blogger usually work is to write the original JS, without plug-ins and not much feeling, and the plug-in will be smaller. But since Zepto is already on the mobile side and Zepto on the PC side, it is not polite to use.

can support both modularity and local referencing of files

Remote plug-ins are basically to let you download a file, and then use the script to quote, so this is understandable, but the largest package manager is not used, it is not sorry page Aberdeen this title. Therefore, this plug-in support file references also support the CMD method of module references.

function Introduction

Directly above:

Technical details

Transitionend Events

The main panel of the plug-in is the number of days in the current month, and if you click on the one-month or next-one-month plugin, you need to calculate the number of days on the one-month or next-one-month basis and insert it into the DOM node. After inserting into the DOM node, you need to animate to show the latest January and fade the old one months, using the CSS2D transformation plus transition. What we need to deal with is to remove it from the DOM tree in time for the old one months to fade, otherwise the memory will explode if the user has been on the spot for one months or months. In order to realize this removal function, one method is to use the SetTimeout event to delete the node at a specific time, after trying to find out that this scheme is not feasible because of the inaccurate characteristics of the JavaScript timer and the increased logic complexity of the one-month switch.
As a result, the plug-in uses the second scenario: the Transitionend event. Refer directly to MDN's introduction:

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

That is, as long as you do not casually tamper with the elements of the CSS properties, when the animation is complete, you can perform the appropriate action (delete the node).
Let's take a look at compatibility:

Enough for mobile Web development!

Finally, the compatibility of the binding event, different vendors for the definition of the event is inconsistent, such as iOS inside the monitoring of the Transitionend event, but in the Android monitor Transitionend incident completely unresponsive, after a Google, found that Android needed to monitor webkittransitionend events. To resolve compatibility issues with binding events, you need to detect what kind of event the browser supports. The following is a code snippet for the above question and answer 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 use

Installation

Support the following two ways

1. After Git clone, direct copy refers to the DATEPICKER.MIN.CSS and Datepicker.min.js below the bin folder
2. Download installation from NPM: NPM install--save Date_picker
   

Use

Reference style Datepicker.min.css
Reference Datepicker.min.js or reference module var DatePicker = require (' Date_picker ');
Instantiating a component, binding plug-in Date selection callback function after completion

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-ins external two api:open and close, which pay special attention to the above demo in _date after the focus is forced to remove the focus, is to avoid Android below for the input tag set ReadOnly property does not prevent the problem of the native keyboard pop-up.