YUI (Yahoo! UI Library) on Rails ： Calendar （2）

Rails
  • カレンダーで選択した日付をフォームに表示させ，それをSubmitする．
  • バレンタインデーがフォームに表示された．

(コードは↓)

ビュー

  • 全ページに適応されるように，/views/layouts/books.rhtml にJavaScriptをかく
[/views/layouts/books.rhtml]

<head>
    <script>
    	YAHOO.namespace("example.calendar");

	function handleSelect(type,args,obj) {
		var dates = args[0]; 
		var date = dates[0];
		var year = date[0], month = date[1], day = date[2];

		var selMonth = document.getElementById("selMonth");
		var selDay = document.getElementById("selDay");
		var selYear = document.getElementById("selYear");
			
		selMonth.selectedIndex = month;
		selDay.selectedIndex = day;

		for (var y=0;y<selYear.options.length;y++) {
			if (selYear.options[y].text == year) {
				selYear.selectedIndex = y;
				break;
			}
		}
	}
				
	function updateCal() {
		var selMonth = document.getElementById("selMonth");
		var selDay = document.getElementById("selDay");
		var selYear = document.getElementById("selYear");
			
		var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
		var day = parseInt(selDay.options[selDay.selectedIndex].value);
		var year = parseInt(selYear.options[selYear.selectedIndex].value);
			
		if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
			var date = month + "/" + day + "/" + year;
			YAHOO.example.calendar.cal1.select(date);
			YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
			YAHOO.example.calendar.cal1.render();
		}
	}
	    
    	function init() {
    		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
    	    YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
    		YAHOO.example.calendar.cal1.render();
    	    YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
		
    	}
    
    	YAHOO.util.Event.addListener(window, "load", init);
    	
    </script>
</head>
  • 書き込みフォームのページにカレンダ表示を挿入
[/views/books/new.rhtml]

<div id="cal1Container"></div>
  • フォームのヘルパに select をベタ書き
  • 今回は，Rails側を修正することで，selMonth などをそのまま使ったが，JavaScript側を修正すれば，ベタ書きせずに済むはず
[views/books/_form.rhtml]

<p><label for="date_on">date_on</label><br/>
<select id="selMonth" name="selMonth">
				<option value="" selected> </option>
				<option value="1">1</option>
				<option value="2">2</option>
                                                                        …
				<option value="11">11</option>
				<option value="12">12</option>
</select>
<select id="selDay" name="selDay">
				<option value="" selected> </option>
				<option value="1">1</option>
				<option value="2">2</option>
                                                                        …
				<option value="30">30</option>
				<option value="31">31</option>
</select>
<select id="selYear" name="selYear">
				<option value="" selected> </option>
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
</select>

コントローラ

  • フォームからの値を @book.date_on にセットする
[app/controllers/books_controller.rb]

  def create
    
    #Calendar
    today = Date.new(params[:selYear].to_i, 
                     params[:selMonth].to_i,
                     params[:selDay].to_i)
    @book.date_on = today
 
  end