We recommend three date selection plug-ins (My97DatePicker, jquery. datepicker, and Mobiscroll) and my97datepicker

We recommend three date selection plug-ins (My97DatePicker, jquery. datepicker, and Mobiscroll) and my97datepicker

We recommend three date selection plug-ins to you:

1. My97DatePicker

Pure native JS, dedicated to PC end, supports IE6 +; only WdatePicker needs to be introduced on the page. js file, but the entire directory of My97DatePicker is a whole. It is recommended that you do not destroy the directory structure. Otherwise, an error will be reported and the specified file cannot be found.

(1) write data directly in an html file

<input id="ipt" type="text" onclick="WdatePicker()" />

Note: Because this plug-in is written in native JS, use the native JS Click Event binding method to bind click events. If you use $ ('# ipt '). on ('click', function () {}), after you select a date and lose the focus, you must click it twice to evoke the calendar.
(2) If you add class = "Wdate" to the input box, a date icon will appear on the right of the input box.
(3) You can use other elements to bring up the date selection box and directly add onclick = "WdatePicker ({el: '# ipt'})" to this element '})"
(4) You can add the position attribute to define the pop-up position, for example, onclick = "WdatePicker ({position: {left: 100, top: 50 }})"
(5) You can add the dateFmt attribute to define the date format, for example, onclick = "WdatePicker ({dateFmt: 'Mm-yy '})"
(6) If onpicked and oncleared events are not defined, onchange events in the text box are automatically triggered. The following describes how to define these events:

Document. getElementById ('ipt '). onclick = function () {WdatePicker ({onpicked: function () {// works with jquery. validate. js plug-in, here manually add verification}, oncleared: function () {// works with jquery. validate. js plug-in, here manually add verification },});}

(7) date selection Association

<input id="d5221" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" /><input id="d5222" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />

(8) You can also split the selected values into text boxes.

<Input type = "text" id = "d523_y" size = "5"/> year <input type = "text" id = "d523_M" size = "3"/> month <input type = "text" id = "d523_d" size = "3"/> <input type = "text" id = "d523_HH" size = "3"/> <input type = "text" id = "d523_mm" size = "3"/> minute <input type = "text" id = "d523_ss" size = "3"/> seconds  <script> function pickedFunc () {$ dp. $('d523 _ y '). value = $ dp. cal. getP ('y'); $ dp. $('d523 _ m '). value = $ dp. cal. getP ('M'); $ dp. $('d523 _ D '). value = $ dp. cal. getP ('D'); $ dp. $('d523 _ hh '). value = $ dp. cal. getP ('H'); $ dp. $('d523 _ mm '). value = $ dp. cal. getP ('M'); $ dp. $('d523 _ ss '). value = $ dp. cal. getP ('s ') ;}</script>

For more functions and parameters, visit http://www.my97.net/dp/demo/resource/3.asp.

2. jquery. datepicker. js

And the images folder in the jquery-ui directory. Otherwise, an error will be reported and the specified file cannot be found.

(1) After the related file is introduced, it is $ ('# ipt'). datepicker ();

(2) several common parameter configurations are as follows:

$ ("# Ipt "). datepicker ({numberOfMonths: 1, // showButtonPanel: true for a few months, // whether to display the button panel dateFormat: 'yy-mm-dd', // Date Format clearText: "clear", // The Name Of The button for clearing the date closeText: "close", // The Name Of The button for closing the selection box yearSuffix: 'Year', // The suffix of showMonthAfterYear: true, // whether to put the month after the year defaultDate: '2017-03-10 ', // default date minDate: '2017-03-05', // maxDate: '1970-03-20 ', // maximum Date of monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ', 'August 22, ', 'August 22,', 'August 22, ', 'August 22,'], dayNames: ['sunday', 'monday', 'tuesday ', 'wedday', 'thurday', 'Friday', 'saturday'], dayNamesShort: ['sunday', 'monday', 'tues', 'wedday', 'thurday ', 'Friday', 'satur'], dayNamesMin: ['day', 'yi', '2', '3', '4', '5 ', '6'], onSelect: function (selectedDate) {// The operation performed after the date is selected alert (selectedDate );}});

3. Mobiscroll

Focus on the Mobile End and rely on the jquery class library. There are multiple styles to choose from. You can introduce various types of files as needed.

(1) demo:

<! DOCTYPE html> 
(2) Resolve the positioning conflict with the mobile keyboard

If there are multiple input boxes on the page, When you click an input box, it will arouse the keyboard that comes with the device. If you directly click the Date input box with another id named appDate, that is, when the focus is lost, after obtaining the focus of the input box bound to mobiscroll, it is found that after the previous soft keyboard sink disappears, the date selection part at the bottom is displayed above the screen. The solution is to find mobiscroll. core-2.5.2.js this file, search for the focus keyword, change the corresponding place:

elm.bind('focus.dw', function () { setTimeout(function(){  that.show(); },300) });
Among them, Ms is the set delay time. In this way, the same operation will be performed, that is, the date selection part will be displayed on the bottom after the previous soft keyboard sink disappears.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.