js 日曆問題

javascript 日曆

puppyulove 2018-11-27 09:29:52 ‧ 6603 瀏覽

分享至

我會生成一個日曆表格在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會比較少就是了。

不明檢舉

幹嘛不要直接貼原始碼上來呢？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

神威

iT邦研究生 4 級 ‧ 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>