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 package

Download address: https://www.jb51.net/jiaoben/18012.html

2. Introduce the component js file into the page:

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 WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})"

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 date

This 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:

AngularJS gets the value selected by My97DatePicker
Recommend three date selection plug-ins (My97DatePicker, jquery.datepicker, Mobiscroll)
ASP.NET My97DatePicker date control realizes OA date note function
ASP.NET uses My97DatePicker date control example
JQuery calendar plugin My97DatePicker date range limit

<<: HTML basics - CSS style sheets, style attributes, format and layout details

>>: How to use Docker to build a development environment (Windows and Mac)