Basic usage of JS date control My97DatePicker
|
My97DatePicker is a very flexible and easy-to-use date control. Very simple to use. 1. Download the My97DatePicker component packageDownload address: https://www.jb51.net/jiaoben/18012.html 2. Introduce the component js file into the page:<script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script> 3. Examples
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Use of My97DatePicker date control</title>
</head>
<body>
<center>
<h2>Use of My97DatePicker date control</h2>
</center>
Basic usage:
<input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>
Only dates before today can be selected:
<input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>
Use operation expressions to select only dates from 20 hours ago to 30 hours later<input id="" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" /><br><br>
Start and end date: <!-- $dp.$ is equivalent to document.getElementById function. -->
<input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />
-
<input id="edate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /><br><br>
</body>
<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
</html> If you need to modify the configuration information, just add the relevant configuration information 4. Commonly used configuration information.The configuration information is mainly defined in the { } object of the WdatePicker method of onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})". Commonly used configuration information is defined in the WdatePicker.js file.
var $dp,WdatePicker;(function(){var _={
$wdate:true,
$dpPath:"",
$crossFrame:true,
doubleCalendar:false, //Whether it is a bimonthly calendar autoUpdateOnChanged:false,
position:{}, //position such as: position:{left:100,top:50}
lang:"auto",
skin:"default", //Skin dateFmt:"yyyy-MM-dd", //Date format realDateFmt:"yyyy-MM-dd",
realTimeFmt:"HH:mm:ss",
realFullFmt:"%Date %Time",
minDate:"1900-01-01 00:00:00", //Minimum date maxDate:"2099-12-31 23:59:59", //Maximum date startDate:"", //Start date alwaysUseStartDate:false, //When the date box is any value, always use startDate as the start date yearOffset:1911,
firstDayOfWeek:0, //Customize the first day of the weekisShowWeek:false, //Show weekdayshighLineWeekDay:true, //Highlight SundayisShowClear:true, //Show clearisShowToday:true, //Show todayisShowOK:true, //Show OK
isShowOthers:true,
readOnly:false, //Is it read-only? qsEnabled:true,
errDealMode:0, //Automatic error correction function//0 When entering an incorrect date, a prompt will be given first//1 When entering an incorrect date, the previous correct value will be automatically restored//2 When entering an incorrect date, no prompt or change will be given, only a mark will be made, but the date box will not be hidden immediately autoPickDate:null, //Reason for clicking twice to select a date//When it is false, the date will not be entered automatically when clicking on it, but it must be entered by confirming//When it is true, the date value can be returned by clicking on the date//When it is null (recommended), if there is time, set it to false, otherwise set it to true
specialDates:null, //Special dates specialDays:null, //Special days disabledDates:null, //Invalid dates such as: disabledDates:['5$']
disabledDays:null, //Invalid days such as: disabledDays:[6]
opposite:false, //Valid dateThis concludes this article about the basic usage of the JS date control My97DatePicker. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: HTML basics - CSS style sheets, style attributes, format and layout details
>>: How to use Docker to build a development environment (Windows and Mac)
Recommend
How to use VUE to call Ali Iconfont library online
Preface Many years ago, I was a newbie on the ser...
Vue global filter concepts, precautions and basic usage methods
Table of contents 1. The concept of filter 1. Cus...
Develop a vue component that encapsulates iframe
Table of contents 1. Component Introduction 2. Co...
CSS mimics remote control buttons
Note: This demo is tested in the mini program env...
How to create a child process in nodejs
Table of contents Introduction Child Process Crea...
About Zabbix forget admin login password reset password
The problem of resetting the password for Zabbix ...
Analysis of Linux kernel scheduler source code initialization
Table of contents 1. Introduction 2. Basic Concep...
Linux installation steps for Jenkins and various problem solving (page access initialization password)
1. Prepare the Java environment, jdk1.8 Check whe...
React sample code to implement automatic browser refresh
Table of contents What is front-end routing? How ...
MySQL compressed package version zip installation configuration method
There are some problems with the compressed versi...
Summary of 7 pitfalls when using react
Table of contents 1. Component bloat 2. Change th...
The advantages and disadvantages of nginx and lvs and their suitable usage environment
At the very beginning, let's talk about what ...
MySQL 5.7.18 version free installation configuration tutorial
MySQL is divided into installation version and fr...
js memory leak scenarios, how to monitor and analyze them in detail
Table of contents Preface What situations can cau...
An IE crash bug
Copy code The code is as follows: <style type=...