簡易的jQuery日曆外掛
阿新 • • 發佈：2019-02-20
=====================
說明：閒著無聊蠻去搜索了下，下面這個網址是無意間搜到的，反正我是下載了一個日曆外掛是可以用的
===================
首先下載樣式啥的連結：https://pan.baidu.com/s/1eLpURtpJz1mHDenjWBC0gw 密碼：67an
然後引入到專案中：
====================================
下面直接看程式碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>簡易單面板日曆</title> <link rel="stylesheet" href="${request.getContextPath()}static/css/laydate.css" /> <script src="${request.getContextPath()}static/js/jquery-1.12.4.min.js"></script> <script src="${request.getContextPath()}static/js/laydate.js"></script> <script type="text/javascript"> function date(){ alert(document.getElementById("laydateInput").value); } </script> </head> <body> <div class="laydate-box"> <input type="text" name="datedate" id="laydateInput" placeholder="xxxx年xx月xx日" /> <img src="${request.getContextPath()}static/images/calendar.png" alt="" class="icon data-icon"/> <div class="select-date"> <div class="select-date-header"> <ul class="heade-ul"> <li class="header-item header-item-one"> <select name="" id="yearList"></select> </li> <li class="header-item header-item-two" onselectstart="return false"> <select name="" id="monthList"></select> </li> <li class="header-item header-item-three" onselectstart="return false" > <span class="reback">回到今天</span> </li> </ul> </div> <div class="select-date-body"> <ul class="week-list"> <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li> </ul> <ul class="day-tabel"></ul> </div> </div> </div> <br> <div> <input type="submit" value="提交" onclick="date()"> </div> </body> </html>
效果：
選擇日期點選提交：
