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
Detailed explanation of custom swiper component in JavaScript
Table of contents Effect display Component Settin...
Solve the problem of margin merging
1. Merge the margins of sibling elements The effe...
vue+element-ui implements the head navigation bar component
This article shares the specific code of vue+elem...
Detailed explanation of setting static ip network card for CentOS 8 VMware virtual machine to access the Internet
first step: In VMware, click "Edit" - &...
Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]
This article describes the MySQL single table que...
4 solutions to mysql import csv errors
This is to commemorate the 4 pitfalls I stepped o...
MySQL Interview Questions: How to Set Up Hash Indexes
In addition to B-Tree indexes, MySQL also provide...
VMware12.0 installation Ubuntu14.04 LTS tutorial
I have installed various images under virtual mac...
Vue-CLI multi-page directory packaging steps record
Page directory structure Note that you need to mo...
Implementing a simple Christmas game with JavaScript
Table of contents Preface Achieve results Code CS...
Each time Docker starts a container, the IP and hosts specified operations
Preface Every time you use Docker to start a Hado...
Why the table file size remains unchanged after deleting data in MySQL
For databases that have been running for a long t...
How to enable Swoole Loader extension on Linux system virtual host
Special note: Only the Swoole extension is instal...
Ubuntu 19.10 enables ssh service (detailed process)
It took me more than an hour to open ssh in Ubunt...
HTML 5 Reset Stylesheet
This CSS reset is modified based on Eric Meyers...