JS日期選擇器(相容IE,Firefox,Opera等主流瀏覽器)

阿新 • • 發佈：2019-01-15

JS檔案下載:

程式截圖:

函式說明 :

主調函式
JTC.setday(args )

引數說明
args :

     1. 可以為空;
     2. 可以為字串. 輸出控制元件的ID
     3. 結構體, 結構體中含有引數如下:
      {
            outObject : 字串或控制元件, 輸出控制元件的ID值或物件.
            readOnly : 布林型設定輸出控制元件是否為只讀模式, false:非只讀(預設); true:只讀 (主要解決.net服務控制元件不能隨意readOnly的問題)
            showClear

: 布林型是否顯示清空按鈕 true(預設):顯示; false不顯示.
            format : 字串返回日期的格式 (預設: yyyy-MM-dd).
            today :   字串/日期物件設定當前的日期(影響範圍: 所有)
            minDate :    字串/日期物件設定可選日期的下限
            maxDate : 字串/日期物件設定可選日期的上限
            ranged :    布林型設定是否包含可選日期範圍的邊界值 false: 不包含; true:包含(預設)

startDay

: 字串/日期物件設定每次選擇時的起始年月
}

    JTC.setToday(dateObj)
    說明: 設定今天的日期. 預設取客戶端的時間; 客戶端的時間並不一定會與伺服器的時間一致. 所以設定此值的意義就是在於: 無論客戶端的時間怎麼改, 控制元件的日期與伺服器依然可以保持同步.
    引數: dateObj 字元型或日期物件字元型最佳格式是:yyyy/MM/dd    示例: '2012/07/25'

   JTC.setDateRange(minDate, maxDate, ranged)
   說明: 設定日期可選範圍 (影響範圍: 所有)
   引數:
       minDate

:    字串/日期物件設定可選日期的下限示例: '2010-02-11'
       maxDate : 字串/日期物件設定可選日期的上限   示例: '2012-07-11'
       ranged :        布林型設定是否包含可選日期範圍的邊界值 false: 不包含; true:包含(預設)

   JTC.setDateFormat(format)
   說明: 設定返回日期的格式 (影響範圍: 所有)
    引數:
         format :    字元型返回日期的格式示例: 'yyyy/MM/dd' ;    'yyyy年MM月dd日'

JTC.setStartDay (date)

說明: 設定日期選擇時的起始年月 (影響範圍: 所有)

引數:

date : 字串/日期物件示例: '2012-07-25'

呼叫舉例:

1. 最簡單的呼叫

Html程式碼

<input type="text" onclick="JTC.setday()" />
<div style="width:120px; height:30px; border:1px solid blue;" onclick="JTC.setday()"></div>
<input type="text" id="timeID" />
<input type="button" value="選擇1" onclick="JTC.setday('timeID')" />
<input type="button" value="選擇2" onclick="JTC.setday({outObject: 'timeID'})" />

2. 設定可選日期範圍

Html程式碼

<input type="text" onclick="JTC.setday({minDate:'2012-07-08', maxDate:'2012-08-23', ranged: true})" />
<input type="text" onclick="JTC.setday({minDate:'2012-07-25', ranged: false})" />

3. 其他細節設定

Html程式碼

<input type="text" onclick="JTC.setday({format:'yyyy年MM月dd日', readOnly: true})" />
<input type="text" onclick="JTC.setday({startDay: '1990-01-01'})" />
<input type="text" onclick="JTC.setday({ showClear: false})" />

4. 全域性設定 (設定後會影響到整個頁面)

Html程式碼

<html>
<head>
<script language="javascript" src="JTimer.js"></script>
<script>
JTC.setToday('2012/06/28'); //設定今天的日期為:2012-06-28
JTC.setDateFormat('MM/dd/yyyy'); //設定返回格式
JTC.setDateRange('1960-01-01', '2012-01-01', true); //設定可選日期範圍
</script>
</head>
<body>
以下各個函式的呼叫所起的作用不同之處<br/>
日期1: <input type="text" onclick="JTC.setday()" /> <br/>
日期2: <input type="text" onclick="JTC.setday({format: 'yyyy年MM月dd日'})" /> <br/>
日期3: <input type="text" onclick="JTC.setday({startDay: '1980-01-01', showClear: false})" /> <br/>
</body>
</html>

JS日期選擇器(相容IE,Firefox,Opera等主流瀏覽器)

JS日期選擇器(相容IE,Firefox,Opera等主流瀏覽器)

純CSS調整select選擇框高度，相容IE/Firefox/Opera/Safair/Chrome

JS日期選擇器

javascript 實現禁止右鍵，複製，選取文字 (相容firefox，IE，chrome等主流瀏覽器)...

js 選擇器相容

JS複製內容（相容IE和Firefox）

前端組件：超好用的日期選擇器，支持全部日期格式已經Vue.js中的使用

js、jQuery，相容IE與firefox火狐的回車事件

JS 回車提交，相容IE、火狐、Opera、Chrome、Safari……

時間、日期選擇器【安卓3】

Android的日期選擇器

js原生選擇器的兼容問題

jQuery UI 日期選擇器（Datepicker）

Android零基礎入門第57節：日期選擇器DatePicker和時間選擇器TimePicker

jQuery UI 實例 - 日期選擇器（Datepicker）

【ElementUI】日期選擇器時間選擇範圍限制

ElementUI日期選擇器時間選擇範圍限制

【vue開發問題-解決方法】（四）vue Element UI 日期選擇器獲取日期格式問題 t.getTime is not a function

DOM操作相關案例模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例

bootstrap-datetimepicker 時間日期選擇器

JS日期選擇器(相容IE,Firefox,Opera等主流瀏覽器)

相關推薦