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
TCP socket SYN queue and Accept queue difference analysis
First we must understand that a TCP socket in the...
How to deploy springcloud project with Docker
Table of contents Docker image download Start mys...
Detailed explanation of mysql download and installation process
1: Download MySql Official website download addre...
Implementation of VUE infinite level tree data structure display
Table of contents Component recursive call Using ...
mysql+mybatis implements stored procedure + transaction + multi-concurrent serial number acquisition
Database stored procedures DROP PROCEDURE IF EXIS...
Design Story: The Security Guard Who Can't Remember License Plates
<br />In order to manage the vehicles enteri...
Native js implements regular validation of the form (submit only after validation)
The following functions are implemented: 1. Usern...
A brief analysis of crontab task scheduling in Linux
1. Create a scheduling task instruction crontab -...
Idea packaged into war package deployed to tomcat and access path issues (illustration and text)
The most important thing for idea to package a we...
Detailed explanation of writing multiple conditions of CSS: not
The :not pseudo-class selector can filter element...
JS Object constructor Object.freeze
Table of contents Overview Example 1) Freeze Obje...
Complete example of vue polling request solution
Understanding of polling In fact, the focus of po...
In-depth analysis of Flex layout in CSS3
The Flexbox layout module aims to provide a more ...
Implementing a random roll caller based on JavaScript
This article shares the specific code of JavaScri...
Example of how to implement local fuzzy search function in front-end JavaScript
Table of contents 1. Project Prospects 2. Knowled...