iT邦幫忙

0

js 日曆問題

https://ithelp.ithome.com.tw/upload/images/20181128/20113617nMHLkV9VWH.pnghttps://ithelp.ithome.com.tw/upload/images/20181128/20113617SXxGGkk2Y3.pnghttps://ithelp.ithome.com.tw/upload/images/20181128/20113617CTl8MRYXM9.pnghttps://ithelp.ithome.com.tw/upload/images/20181128/20113617Ajb1gMDWo2.pnghttps://ithelp.ithome.com.tw/upload/images/20181128/20113617PY4WoVnuR7.png

我會生成一個日曆表格在div裡面
請問要如何讓每個input的部分可以個別使用日曆呢(兩者不衝突)
每次用input選日期時候兩個input都會跳出一樣的值Q.Q
感激大大

rising iT邦新手 5 級 ‧ 2018-11-27 09:38:01 檢舉
不同 input 使用同一個月曆實體的架構我想會比各自擁有一個月曆實體要來得好,你要做的應該是每次打開月曆時都要重設月曆的顯示狀態,好讓月曆在視覺上能與目前點選的 input 有所關聯
froce iT邦高手 1 級 ‧ 2018-11-27 10:43:19 檢舉
眼力大挑戰。

jQuery Calendar給的範例,這是給不同實例的。
https://jqueryui.com/datepicker/#date-range

給同一實例的不一定要寫的code會比較少就是了。
幹嘛不要直接貼原始碼上來呢?

2 個回答

2
神威
iT邦新手 3 級 ‧ 2018-11-27 10:17:21

以下我的日曆寫法,請參考

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <link rel="stylesheet" type="text/css" href="mytab.css">
    </head>
   
 <script>
  
  $(function(){
			$( "#start_d" ).datepicker({
				changeMonth:true,
				changeYear:true,
				dateFormat:"yy-mm-dd",
						
			});
		
		$( "#end_d" ).datepicker({
				changeMonth:true,
				changeYear:true,
				dateFormat:"yy-mm-dd",
						
			});
		
		});
		
  </script>
    <body>   
    <div class="container">
	<form id="form1" name="form1" method="post" action="otsel.php"  class="form-inline">
    起始日:<input type = "text" class="form-control" name="start_d" id= "start_d" size = "20" value="<?php echo $_POST['start_d'];?>">
    結束日:</td><td> <input type = "text" class="form-control" name= "end_d" id= "end_d" size = "20"  value="<?php echo $_POST['end_d'];?>">
       </form>
         </div>
    </body>
</html>

    

datepicker 包含在 jquery.min.js
如果是初學者,可以先單獨載入之後熟悉了再去載入其他的套件功能

1
darwin0616
iT邦新手 3 級 ‧ 2018-11-27 11:26:57

如果對瀏覽器 IESafari 沒有特別需求,日期建議就用 HTML 5 type="date" 語法!
參考範例連結:
HTML Input Types
min & max attribute example

我要發表回答

立即登入回答