js如何點選文字方塊彈出一個calendar控制元件

2019-12-11 13:54:45

在做網頁開發時，有時需要在頁面輸入框裡提供一個日期控制元件，方便使用者輸入選擇日期。這個怎麼處理呢？我們可以使用一些指令碼外掛，很容易就能新增日期控制元件了。下面我們來看一下怎麼處理。

我們百度搜尋jquery easyui，開啟官方網站後，把外掛下載回來。

下載回來後，把對應的指令碼檔案放到自己的網站目錄裡面，然後在頁面上引入對應的指令碼檔案。

先引入jquery指令碼檔案，再引入easyui對應的指令碼檔案。

另外還要引入對應的樣式檔案，這些樣式檔案也要放進自己的網站目錄裡的。

然後我們的html程式碼就很簡單了，直接新建一個inpurt控制元件，最關鍵的地方就是為它新增一個class='easyui-datebox'，這樣就會自動為我們建立一個日期輸入框的，任何js程式碼都不需要了。

開啟頁面，可以看到現在頁面上已經生成一個日期輸入框了。

點選右邊的日期圖示，就會彈出日期選擇視窗的，點選一個日期。

點選後，日期視窗自動關閉，所選擇的日期就已經顯示在輸入框裡了。

借助這個指令碼外掛，我們很容易就為頁面新增一個日期控制元件了。