API tools faq
paste
Advertisement
KuoHsiangYu

Test_Page_1.jsp【前端】

KuoHsiangYu
Aug 22nd, 2019
159
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.49 KB | None | 0 0
raw download clone embed print report
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <title>Test_Page_1</title>
  10. <link rel="stylesheet"
  11.     href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  13. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  14. </head>
  15. <body>
  16.     <!-- align="center" 設定置中 -->
  17.     <div align="center">
  18.         <form method="POST" action="${pageContext.request.contextPath}/Ch01">
  19.             <%--<div style="color: #FF0000; display: inline">${ErrorMsg.all}</div>--%>
  20.             <div style="color: #FF0000;">${ErrorMsg.all}</div>
  21.             <table border="1">
  22.                 <tr>
  23.                     <td>職務代理人挑選</td>
  24.                     <td colspan="3">
  25.                         <select id="cname" name="cname">
  26.                     </select>
  27.                     </td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td rowspan="2">代理時間</td>
  31.                     <!--autocomplete="off"不要讓瀏覽器記住使用者輸入資料的歷史紀錄-->
  32.                     <td>開始日期：<input type="text" id="start_date" name="start_date"
  33.                         autocomplete="off" /></td>
  34.                     <td>時間： <select id="start_time" name="start_time">
  35.                     </select>
  36.                     </td>
  37.                     <td></td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>結束日期：<input type="text" id="end_date" name="end_date"
  41.                         autocomplete="off" /></td>
  42.                     <td>時間： <select id="end_time" name="end_time">
  43.                     </select>
  44.                     </td>
  45.                     <td><input type="submit" value="確定送出" /></td>
  46.                 </tr>
  47.                 <tr></tr>
  48.             </table>
  49.         </form>
  50.         <br>
  51.         <a href="index.jsp">回首頁</a>
  52.     </div>
  53.     <script>
  54.         // jQuery 日曆 起始日期不可以超過結束日期。
  55.         // dateFormat : 'yy-mm-dd'→設定 年-月-日
  56.         /* [jQuery] 如何為 DatePicker 加上中文化日期選項？ */
  57.         /* http://blog.e-happy.com.tw/jquery-how-to-add-cultural-datepicker-date-option/ */
  58.  
  59.         let selectedDate = "";
  60.  
  61.         //設定中文語系
  62.         $.datepicker.regional['zh-TW'] = {
  63.             dayNames : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
  64.             dayNamesMin : [ "日", "一", "二", "三", "四", "五", "六" ],
  65.             monthNames : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
  66.                     "九月", "十月", "十一月", "十二月" ],
  67.             monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
  68.                     "九月", "十月", "十一月", "十二月" ],
  69.             prevText : "上一月",
  70.             nextText : "下一月",
  71.             weekHeader : "週"
  72.         };
  73.  
  74.         //將預設語系設定為中文
  75.         $.datepicker.setDefaults($.datepicker.regional["zh-TW"]);
  76.  
  77.         $(function() {
  78.             $("#start_date").datepicker(
  79.                     {
  80.                         dateFormat : 'yy-mm-dd',
  81.                         defaultDate : "+1w",
  82.                         changeMonth : true,
  83.                         numberOfMonths : 1,
  84.                         showOn : "button",
  85.                         buttonImage : "calendar.gif",
  86.                         buttonImageOnly : true,
  87.                         onClose : function(selectedDate) {
  88.                             $("#end_date").datepicker("option", "minDate",
  89.                                     selectedDate);
  90.                         }
  91.                     });
  92.  
  93.             $("#end_date").datepicker(
  94.                     {
  95.                         dateFormat : 'yy-mm-dd',
  96.                         defaultDate : "+1w",
  97.                         changeMonth : true,
  98.                         numberOfMonths : 1,
  99.                         showOn : "button",
  100.                         buttonImage : "calendar.gif",
  101.                         buttonImageOnly : true,
  102.                         onClose : function(selectedDate) {
  103.                             $("#start_date").datepicker("option", "maxDate",
  104.                                     selectedDate);
  105.                         }
  106.                     });
  107.         });
  108.     </script>
  109.     <script>
  110.         //動態產生下拉式選單的時間項目
  111.         // let str = `${hour.toString().padStart(2, '0')}：${minute.toString().padStart(2, '0')}`;
  112.         let objStartTime = document.getElementById("start_time");
  113.         for (let i = 0; i <= 23; i++) {
  114.             for (let j = 0; j < 2; j++) {
  115.                 let str = "";
  116.                 if (i < 10) {
  117.                     str += "0" + String(i);
  118.                 } else {
  119.                     str += String(i);
  120.                 }
  121.                 str += "：";
  122.                 if (j == 0) {
  123.                     str += "00";
  124.                 } else {
  125.                     str += "30";
  126.                 }
  127.                 let objOption = new Option(str, str);
  128.                 objStartTime.add(objOption);
  129.             }
  130.         }
  131.  
  132.         let objEndTime = document.getElementById("end_time");
  133.         for (let i = 0; i <= 23; i++) {
  134.             for (let j = 0; j < 2; j++) {
  135.                 let str = "";
  136.                 if (i < 10) {
  137.                     str += "0" + String(i);
  138.                 } else {
  139.                     str += String(i);
  140.                 }
  141.                 str += "：";
  142.                 if (j == 0) {
  143.                     str += "00";
  144.                 } else {
  145.                     str += "30";
  146.                 }
  147.                 let objOption = new Option(str, str);
  148.                 objEndTime.add(objOption);
  149.             }
  150.         }
  151.     </script>
  152.     <script>
  153.         //  使用AJAX技術非同步更新2，把資料庫裡面職務代理人資料抓出來秀在網頁上。
  154.         let objCname = document.getElementById("cname");
  155.         let data = "";
  156.         $.ajax({
  157.             url : "${pageContext.request.contextPath}/GetNameData2",
  158.             type : "GET",
  159.             success : function(data) {
  160.                 showNames(data);
  161.             }
  162.         });
  163.  
  164.         function showNames(data) {
  165.             let names = data.split(",");
  166.             // console.log("typeof names -> " + (typeof names));
  167.             for (let i = 0; i < names.length; i++) {
  168.                 let objOption = new Option(names[i], names[i]);
  169.                 objCname.add(objOption);
  170.             }
  171.         }
  172.     </script>
  173.     <!-- js 操作select和option常用程式碼整理 -->
  174.     <!-- https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/292252/ -->
  175. </body>
  176. </html>
  177. <!-- http://blog.e-happy.com.tw/jquery-how-to-add-cultural-datepicker-date-option/ -->
  178. <!-- http://www.runoob.com/jqueryui/example-datepicker.html -->
  179. <!-- https://www.vnewin.com/html-input-autocomplete-off/ -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!