SoFunction
Updated on 2025-03-10

Basic usage of JS date control My97DatePicker

My97DatePicker is a very flexible and easy-to-use date control. Very easy to use.

1. Download the My97DatePicker component package

Download address:https:///jiaoben/

2. Introduce the component js file into the page:

<script type="text/JavaScript" src="My97DatePicker/"></script> 

3. Example

    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;My97DatePickerDate controls are used&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;center&gt;
            &lt;h2&gt;My97DatePickerUse of date control&lt;/h2&gt;
        &lt;/center&gt;
                Basic usage：
        &lt;input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /&gt;&lt;br&gt;&lt;br&gt;

                Only choose dates before today：
        &lt;input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /&gt;&lt;br&gt;&lt;br&gt;

               Using operational expressions Only selectable 20Hour ago to 30After a hour Date of
        &lt;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'})" /&gt;&lt;br&gt;&lt;br&gt;

                start，End date：&lt;!-- $dp.$ Equivalent to  function. --&gt;
        &lt;input  class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" /&gt;
        -
        &lt;input  class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /&gt;&lt;br&gt;&lt;br&gt;

      &lt;/body&gt;
      &lt;script type="text/javascript" src="/js/My97DatePicker/"&gt;&lt;/script&gt;
    &lt;/html&gt;

To modify the configuration information, justWdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" Add relevant configuration information

4. Common configuration information.

The configuration information is mainly defined in the { } object of the WdatePicker method of onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})".

Common configuration information is defined in the file.

var $dp,WdatePicker;(function(){var _={
    $wdate:true,
    $dpPath:"",
    $crossFrame:true,
    doubleCalendar:false, //Is it a bimonthly calendar    autoUpdateOnChanged:false,
    position:{}, //Location 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 no matter what value, always use startDate as the start date    yearOffset:1911,
    firstDayOfWeek:0, //Customize the first day of the week    isShowWeek:false, //Whether to display week    highLineWeekDay:true, //Highlight Sunday    isShowClear:true, // Whether to display clear    isShowToday:true, //Does today be displayed    isShowOK:true,  //Whether OK is displayed    isShowOthers:true,
    readOnly:false, //Read only    qsEnabled:true,
    errDealMode:0, //Automatic error correction function    //0 When entering the error date, it will be prompted first    //1 When entering the wrong date, the correct value will be automatically restored to the previous correct value    //2 When entering the wrong date, no prompts or changes are made, just a mark, but the date box will not be hidden immediately at this time.    autoPickDate:null, //Reasons to select a date by clicking twice    //When it is false, it will not be entered automatically when clicking on the date, but must be confirmed before entering    // When true, click on the date to return the date value    // When null (recommended) Set to false if there is time otherwise set to true    specialDates:null, //Special date    specialDays:null,  //Special Day    disabledDates:null, //Invalid date For example: disabledDates:['5$']    disabledDays:null, //Invalid days: disabledDays:[6]    opposite:false, //Valid date

This is all about this article about the basic usage of the JS date control My97DatePicker. I hope it will be helpful to everyone's learning and I hope everyone will support me more.