天天看點
傳回

wdatePicker 日期插件，備份記錄

示範和文檔首頁：http://www.my97.net/dp/demo/

1、注意事項：      My97DatePicker目錄是一個整體，不可破壞裡面的目錄結構。      将整個My97DatePicker檔案夾引入。       2、 正常功能          a、正常調用 [javascript]  view plain copy

  1. <input id="d121" type="text" οnfοcus="WdatePicker({isShowWeek:true})"/>  

   b、圖示觸發 在WdatePicker()中傳入控件的id [javascript]  view plain copy

  1. <span style="white-space:pre">      </span> <input id="d12" type="text"/>  
  2.         <img οnclick="WdatePicker({el:'d12'})" src="js/My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle">  

c、周顯示

配置isShowWeek屬性決定是否限制周，并且在傳回日期的時候可以在自定義的事件中傳回周 [javascript]  view plain copy

  1. <span style="white-space:pre">      </span><input id="d121" type="text" οnfοcus="WdatePicker({isShowWeek:true})"/>  

利用onpicked事件将周指派給其他文本框

[javascript]  view plain copy

  1. <input type="text" class="Wdate" id="d122" onFocus="WdatePicker({isShowWeek:true,onpicked:function() {$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>  

[javascript]  view plain copy

  1. 格式一：<input type="text" id="122_1"/>   格式二：<input type="text" id="122_2">    

4、隻讀開關，高亮顯示周末： readOnly: hignLineWeekDay: 5、操作按鈕： isShowClear： 清空按鈕，預設true iisShowToday：今天按鈕，預設true  6、彈出位置： 使用position參數對位置進行設定： [javascript]  view plain copy

  1. <input class="Wdate" type="text" id="d16" οnfοcus="WdatePicker({position:{left:100,top:50}})"/>  

7、自定義星期的第一天： firstDayOfWeek: 0表示星期天，1表示星期一 [javascript]  view plain copy

  1. <input class="Wdate" type="text" id="d17" οnfοcus="WdatePicker({firstDayOfWeek:1})"/>  

8、平面顯示 平面顯示功能就是當作桌面月曆，通過eCont屬性設定，eCont值為要現實的位置 [javascript]  view plain copy

  1. <div id="div1"></div>  
  2. <script>  
  3. WdatePicker({eCont:'div1',onpicked:function(dp){alert('你選擇的日期是:'+dp.cal.getDateStr())}})  
  4. </script>  

9、将日期傳回到指定位置 [javascript]  view plain copy

  1. <span id="demospan">2008-01-01</span>   
  2. <img onClick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />  

此處 ，可設定2008-01-01為動态的值，如：使用jQuery擷取目前時間： [javascript]  view plain copy

  1. jQuery(document).ready(function(){  
  2.     var date=new Date();  
  3. jQuery("#demospan").val(date);  
  4. });  

10、起止日期： a、當日期值為空時，使用指定值作為起始時間： [javascript] view plain copy

  1. <input type="text" id="d221" onFocus="WdatePicker({startDate:'1980-05-01'})"/>  

b、無論日期值為何值，都使用指定值為起始時間： [javascript] view plain copy

  1. <input type="text" id="d222" onFocus="WdatePicker({startDate:'1980-05-01',alwaysUseStartDate:true})"/>  

c、使用動态參數，%y指當年， %M指當月 [javascript] view plain copy

  1. <input type="text" id="d233" onFocus="WdatePicker({startDate:'%y-%M-01 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss',alwaysUseStartDate:true})"/>  

dateFmt指定日期的格式：

wdatePicker 日期插件，備份記錄

d、擷取系統能夠識别的時間格式： 實際應用中，會把vel指定為一個hidden控件。 [javascript] view plain copy

  1. <input id="d244" type="text" class="Wdate" οnfοcus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>  
  2. <input id="d244_2" type="text" />  

e、雙月月曆顯示： [javascript] view plain copy

  1. <input class="Wdate" type="text" οnfοcus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"/>  

doubleCalendar，設定是否是雙月月曆

11、日期範圍限制 a、靜态限制 2006-09-10到2008-12-20 [javascript] view plain copy

  1. <input id="d411" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>  

2008-03-08 11:30:00到2008-03-09 11:00:00 [javascript] view plain copy

  1. <input type="text" class="Wdate" id="d412" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>  

b、動态限制

wdatePicker 日期插件，備份記錄

今天以前： [javascript] view plain copy

  1. <input id="d421" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>  

今天以後： [javascript] view plain copy

  1. <input id="d422" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>  

本月： [javascript] view plain copy

  1. <input id="d423" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>  

今天7時到明天21時： [javascript] view plain copy

  1. <input id="d424" class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>  

20小時前到30小時後： [javascript] view plain copy

  1. <input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>  

前面值小于後面值： 前後日期格式必須一緻，其中，$dp.$相當于document.getElementById(); #F{$dp.$D(\'d4312\')||\'2020-10-01\'}表示當d4312為空時，采用2020-10-01的值作為最大值

[javascript]  view plain copy

  1. <input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>   
  2. <input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>  

前面的日期+3月零2天 不能大于 後面的日期 且 前面日期都不能大于 2020-4-3減去3月零2天 後面日期 不能大于 2020-4-3

使用 $dp.$D 函數 可以将日期框中的值,加上定義的日期差量:

兩個參數: id={字元類型}需要處理的文本框的id值 , obj={對象類型}日期差量

日期差量用法:

屬性y,M,d,H,m,s分别代表年月日時分秒

如 

為空時,表示直接取值,不做差量(示例4-3-1中的參數就是空的)

{M:5,d:7} 表示 五個月零7天

{y:1,d:-3} 表示 1年少3天

{d:1,H:1} 表示一天多1小時

[javascript]  view plain copy

  1. <input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>  
  2. <input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>  

無效日期： 禁用每月已5結尾的日期： [javascript]  view plain copy

  1. <input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>  

禁用19開頭的日期： [javascript]  view plain copy

  1. <input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>  

12、日期關聯： [javascript]  view plain copy

  1. <input id="d5221" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})"/>  
  2. 至  
  3. <input id="d5222" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})"/>  

13、onclearing事件取消清空操作 當onclearing傳回true時，清空操作取消 [javascript]  view plain copy

  1. <input type="text" class="Wdate" id="d531" onFocus="WdatePicker({onclearing:function(){if(!confirm('日期框的值為:'+this.value+', 确實要清空嗎?'))return true;}})"/>  

屬性配置

  1. 屬性表
    屬性 類型 預設值 說明
    靜态屬性:隻能在WdatePicker.js中配置,一般情況下,不建議您修改靜态屬性的值
    $wdate bool true

    是否自動引入Wdate類 設定為true時,可直接在引入WdatePicker.js的頁面裡使用 class="Wdate" 

    Wdate可在skin目錄下的WdatePicker.css檔案中定義

    建議使用預設值
    $dpPath string ''

    是否顯示指定程式包的絕對位置,一般情況下為空即可(程式自動建立),該屬性是為防止極其少數的情況下程式建立出錯而設定的

    設定方法:

    如果,程式包所在http中的位址為 http://localhost/proName/My97DatePicker/

    則 $dpPath = '/proName/My97DatePicker/';

    建議使用預設值
    $crossFrame bool true 是否跨架構,一般設定為true即可,遇到跨域錯誤時可以将此功能關閉
    可配置屬性:可以在WdatePicker方法是配置
    el Element 或 String null 指定一個控件或控件的ID,必須具有value或innerHTML屬性(如input,textarea,span,div,p等标簽都可以),使用者存儲日期顯示值(也就是dateFmt格式化後的值)
    vel Element 或 String null 指定一個控件或控件的ID,必須具有value屬性(如input),用于存儲真實值(也就是realDateFmt和realTimeFmt格式化後的值)
    doubleCalendar bool false 是否是雙月模式,如果該屬性為true,則彈出同時顯示2個月的日期框
    enableKeyboard bool true 鍵盤控制開關
    enableInputMask bool true 文本框輸入啟用掩碼開關
    autoUpdateOnChanged bool null

    在修改年月日時分秒等元素時,自動更新到el,預設是關閉的(即:需要點選确定或點選日期才更新)

    為false時 不自動更新

    為true時 自動更新

    為null時(預設值) 如果有日元素且不隐藏确定按鈕時 為false,其他情況為true
    weekMethod string ISO8601

    周算法不同的地方有一些差異

    常見算法有兩種

    1. ISO8601:規定第一個星期四為第一周,預設值

    2. MSExcel:1月1日所在的周

    相關連結:http://en.wikipedia.org/wiki/ISO_week_date
    position object {}

    日期選擇框顯示位置

    注意:坐标機關是px,是相對目前架構坐标(不受滾動條影響),預設情況下系統根據頁面大小自動選擇

    如:

    {left:100,top:50}表示固定坐标[100,50]

    {top:50}表示橫坐标自動生成,縱坐标指定為 50

    {left:100}表示縱坐标自動生成,橫坐标指定為 100
    lang string 'auto'

    當值為'auto'時 自動根據用戶端浏覽器的語言自動選擇語言

    當值為 其他 時 從langList中選擇對應的語言 
    skin string 'default'

    皮膚名稱 預設自帶 default和whyGreen兩個皮膚

    另外如果你的css夠強的話,可以自己做皮膚
    dateFmt string 'yyyy-MM-dd' 日期顯示格式
    realDateFmt string 'yyyy-MM-dd'

    計算機可識别的,真正的日期格式

    無效日期設定(disabledDates),最大日期(maxDate),最小日期(minDate)以及快速日期都必須與它們相比對

    建議使用預設值
    realTimeFmt string 'HH:mm:ss'
    realFullFmt string '%Date %Time'
    minDate string '1900-01-01 00:00:00' 最小日期(注意要與上面的real日期相比對)
    maxDate string '2099-12-31 23:59:59' 最大日期(注意要與上面的real日期相比對)
    startDate string ''

    起始日期,既點選日期框時顯示的起始日期

    為空時,使用今天作為起始日期(預設值)

    否則使用傳入的日期作為起始日期(注意要與上面的real日期相比對)
    firstDayOfWeek int 周的第一天 0表示星期日 1表示星期一
    isShowWeek bool false 是否顯示周
    highLineWeekDay bool true 是否高亮顯示 周六 周日
    isShowClear bool true 是否顯示清空按鈕
    isShowToday bool true 是否顯示今天按鈕
    isShowOthers bool true 為true時,第一行空白處顯示上月的日期，末行空白處顯示下月的日期,否則不顯示
    readOnly bool false 是否隻讀
    errDealMode int 糾錯模式設定 可設定3中模式 0 - 提示 1 - 自動糾錯 2 - 标記
    autoPickDate bool null

    為false時 點日期的時候不自動輸入,而是要通過确定才能輸入

    為true時 即點選日期即可傳回日期值

    為null時(推薦使用) 如果有時間置為false 否則置為true
    qsEnabled bool true 是否啟用快速選擇功能
    autoShowQS bool false 是否預設顯示快速選擇
    quickSel Array null

    快速選擇資料,可以傳入5個快速選擇日期

    注意:日期格式必須與 realDateFmt realTimeFmt realFullFmt 相比對
    disabledDays Array null

    可以使用此功能禁用周日至周六所對應的日期

    0至6 分别代表 周日至周六
    disabledDates Array null 可以使用此功能禁用所指定的一個或多個日期
    opposite bool false

    預設為false, 為true時,無效日期變成有效日期 

    注意:該屬性對無效天特殊天不起作用
    specialDates Array null 特殊日期,對指定的日期進行高亮顯示
    specialDays Array null

    特殊天,使用此功能禁用周日至周六所對應的日期進行高亮顯示

    0至6 分别代表 周日至周六
    onpicking function null 此四個參數為事件參數
    onpicked function null
    onclearing function null
    oncleared function null

    ychanging ychanged 

    Mchanging Mchanged

    dchanging dchanged

    Hchanging Hchanged

    mchanging mchanged

    schanging schanged

    		 function null

    (4.6Beta3新增)

    y M d H m s 分别表示年月日時分秒

    changing 事件發生在屬性改變之前

    changed 事件發生在屬性改變之後

内置函數和屬性

函數名 傳回值類型 作用域 參數 描述
$dp.show void 全局 無 顯示日期選擇框
$dp.hide void 全局 無 隐藏日期選擇框
$dp.$D String 全局

id [string]: 對象的ID 

arg [object]: 日期差量,可以設定成

{y:[值],M:[值],d:[值],H:[值],m:[值],s:[值]}

屬性 y,M,d,H,m,s 分别代表 年月日時分秒

{M:3,d:7} 表示 3個月零7天

{d:1,H:1} 表示1天多1小時

 将id對應的日期框中的日期字元串,加上定義的日期差量,傳回使用real格式化後的日期串
$dp.$DV String 全局

v [string]: 日期字元串

arg [object]: 同上例的arg

 将傳入的日期字元串,加上定義的日期差量,傳回使用real格式化後的日期串
以下函數隻在事件自定義函數中有效
$dp.cal.getP String 事件function

p [string]: 屬性名稱 yMdHmswWD分别代表年,月,日,時,分,秒,星期(0-6),周(1-52),星期(一-六) 

f [string]: format 格式字元串

設定方法參考 1.4 自定義格式

 傳回所指定屬性被格式字元串格式化後的值[單屬性],在changing,picking,clearing事件中傳回選擇前的值
$dp.cal.getDateStr String 事件function f [string]: 格式字元串,為空時使用dateFmt 傳回所指定屬性被格式字元串格式化後的值[整個值],在changing,picking,clearing事件中傳回選擇前的值
$dp.cal.getNewP String 事件function 用法同$dp.cal.getP 傳回所指定屬性被格式字元串格式化後的值[單屬性],在changing,picking,clearing事件中傳回選擇後的值
$dp.cal.getNewDateStr String 事件function 用法同$dp.cal.getDateStr 傳回所指定屬性被格式字元串格式化後的值[整個值],在changing,picking,clearing事件中傳回選擇後的值
屬性名 傳回值類型 作用域 參數 描述
$dp.cal.date object 事件function

$dp.cal.date.y:傳回 年

$dp.cal.date.M:傳回 月

$dp.cal.date.d:傳回 日

$dp.cal.date.H:傳回 時

$dp.cal.date.m:傳回 分

$dp.cal.date.s:傳回 秒 

 在changing,picking,clearing事件中傳回選擇前的日期對象
$dp.cal.newdate object 事件function 用法同$dp.cal.date 在changing,picking,clearing事件中傳回選擇後的日期對象
javascript 日期控件 DatePicker
上一篇: android自定義圓形控件,Android自定義控件之圓形/圓角的實作代碼
下一篇: 頭像加相框微信小程式

繼續閱讀