protocalenar.js が本日発売の「Web Designing」5月号「Ajax ハジメメマシタ」のコーナーに掲載されました。

「フォームの入力作業をサポートする」という特集（P122～）で、protocalendar.js を使った日付入力例が紹介されています。

同じ特集ではその他にも、JavsScript での Validation や郵便番号から住所を補完するスクリプトなどが紹介されいます。

弊社プロダクトを雑誌・書籍に掲載される場合、その旨をご連絡頂きますと弊社でも紹介させて頂きます。

その際は、ラボのお問い合わせページからお願い致します。

protocalendar.js v1.1.5 を公開しました。

今回の変更点は2点の不具合修正です。

【変更点】

*InputCalendar 使用時に初期値以外の時間の入力値がカレンダーに反映されない不具合を修正しました。

*SelectCalendar 使用時に年,月などを select タグ経由で変更すると、勝手に値が入る場合がある不具合を修正しました。

【使い方はこちら】
http://labs.spookies.jp/demo/protocalendar/sample/calendar_usage.html

【プロダクト概要とダウンロードはこちら】
http://labs.spookies.jp/product/protocalendar

【今後の展望】
*スタイルの追加・修正。（いつでも同じように見えるように）
*「閉じる」、「クリア」を表示するオプションの追加。

1.1.5の開発中にはてブコメントからの不具合報告を発見してもう1点不具合を修正しました。

入力文字が入力フォーマットに合っていないと、入力文字列が消えてしまうのに関しては、

いろいろな絡みがあるので、どういう対応にするか少し検討してみます。

（「今の日時を入力」も検討してみます。）

その他にも不具合報告、機能要望などありましたらぜひこのブログのコメントへ投稿お願いします。（要望はすべて対応できるとは限りませんが検討はします）

protocalendar.js v1.1.4 を公開しました。

久々の更新になりました。今回の変更点は以下の通りです。

【変更点】

*表示と非表示のエフェクトが指定できるようになりました。

*DateFormat クラスは競合を避けるため ProtoCalendar.DateFormat に変更になりました。

【使い方はこちら】
http://labs.spookies.jp/demo/protocalendar/sample/calendar_usage.html

【プロダクト概要とダウンロードはこちら】
http://labs.spookies.jp/product/protocalendar

【今後の展望】
*スタイルの追加・修正。（いつでも同じように見えるように）
*「閉じる」、「クリア」を表示するオプションの追加。

protocalendar.js v1.1.3 を公開しました。

今回の変更点はコメントで報告して頂いた、2点のバグフィックスのみのリリースです。
【変更点】

*8月9月の判定が正しくできない不具合の修正。

*InputCalendar で時間の初期値が入らない不具合の修正。

【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.1.3/sample/calendar_usage.html

【download はこちら】

http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.3.zip

【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加・修正。（いつでも同じように見えるように）

*「閉じる」、「クリア」を表示するオプションの追加。

デフォルトで lang:’ja’ を使っているため、日付フォーマットが yyyy/mm/dd になるように小細工をしています。

また、オプションは lang, startYear, endYear のみ有効になっています。

function dateInput($fieldName, $htmlAttributes = array(), $calOptions = array(), $return = false, $typeModel = true) {
  if (!isset($htmlAttributes['value'])) {
    $date = $this->tagValue($fieldName);
    if ($date) {
      $htmlAttributes['value'] = date('Y/m/d', strtotime($date));
    }
  }
  $result = $this->input($fieldName, $htmlAttributes, $return);

  if(!empty($htmlAttributes['id'])){
    $styleId = $htmlAttributes['id'];
  }else if($typeModel == true){
    $this->setFormTag($fieldName);
    $styleId = $this->model . Inflector::camelize($this->field);
  }else{
    $this->field = $fieldName;
    $styleId = $this->field;
  }

  $script = "  InputCalendar.createOnLoaded('{$styleId}', {";
  $lang = !empty($calOptions['lang']) ? "lang:{$calOptions['lang']} " : "lang:'ja'";
  $script .= $lang;
  if (!empty($calOptions['startYear'])) {
    $script .= ", startYear:{$calOptions['startYear']} ";
  }
  if (!empty($calOptions['endYear'])) {
    $script .= ", endYear:{$calOptions['endYear']} ";
  }
  $script .= "});";

  if (AUTO_OUTPUT && $return == false) {
    echo $result;
    echo $this->Javascript->codeBlock($script, false);
  } else {
    return ($result . $this->Javascript->codeBlock($script, false));
  }
}

今回、本当はモデルの特定アトリビュートだけにバリデーションを実行するプラグイン「valid_attributes」を公開しようかと思っていたのですが、

個人的なサイトの方で公開してしまったので、今回は protocalendar.js の ruby on rails 用ヘルパメソッド（のひな形）を公開したいと思います。

オプション関係など完璧ではないのですが、独自ヘルパメソッドを作るベースになればと思います。

action_view_ext.rb

module ActionView
  module Helpers
    module FormHelper
      def date_field(object_name, method, options = {})
        result = text_field_for_date(object_name, method, options)
        styleId = options[:id] ? options[:id] : object_name.to_s + '_' + method.to_s
        contents = "InputCalendar.createOnLoaded('#{styleId}', {";
        lang = options[:lang] ? "lang:#{options[:lang]} " : "lang:'ja'"
        contents << lang
        contents << ", startYear:#{options[:startYear]} " if options[:startYear]
        contents << ", endYear:#{options[:endYear]} " if options[:endYear]
        contents << "});";
        return (result + javascript_tag(contents))
      end

      protected

      def text_field_for_date(object_name, method, options = {})
        tag = InstanceTag.new(object_name, method, self, nil, options.delete(:object))
        result = tag.value(tag.object)
        unless result.nil?
          time = result.strftime("%Y/%m/%d")
          tag.object.write_attribute(method, time) unless tag.nil?
        end
        return tag.to_input_field_tag("text", options)
      end
    end
  end
end

デフォルトで lang:’ja’ を使っているため、日付フォーマットが yyyy/mm/dd になるように、

FormHelper を拡張して、text_field_for_date　で小細工をしています。

cakephp 用のヘルパメソッドも近々公開します。

protocalendar.js v1.1.2 を公開しました。

変更点は以下の通りです。
【変更点】

*prototype.js 1.5 系で動作しない場合があるのを修正。

【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.1.2/sample/calendar_usage.html

【download はこちら】

http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.2.zip

【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。
*rails, cakephp の helper 作成。

今回は不具合修正のみのリリースです。

時間入力対応などで、英語、中国語、日本語以外の言語ファイルが精査できていないので、

外国語に詳しい方は言語ファイルを修正して頂けると大変助かります！

ラボのサイトもあと少しで公開です。

次回は rails プラグインをリリースします。

protocalendar.js v1.1.1 を公開しました。

主な変更点は以下の通りです。
【変更点】

*日付フォーマットの不具合の修正。

*SelectCalendar の不具合の修正。

*言語ファイルの更新。（lang_zh-tw.js）

【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.1.1/sample/calendar_usage.html

【download はこちら】

http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.1.zip

【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。
*rails, cakephp の helper 作成。

今回のリリースは不具合の修正と言語ファイルの更新のみです。

時間入力対応などで、英語、中国語、日本語以外の言語ファイルは精査できていないので、

外国語に詳しい方は言語ファイルを修正して頂けると大変助かります。

また、今回から min 版もアーカイブに同梱することにしましたので、必要に応じてご利用下さい。

時間入力にも対応した、prototype.js ベースの日付選択用ライブラリ「protocalendar.js」v1.1.0 を公開しました。

開発自体はかなり前に終了していたのですが、ラボの公式サイトのオープンを待っていたら、

前のリリースから1カ月近く経過していたので、先攻してリリースすることにしました。

protocalendar.js v1.1.0

主な変更点は以下の通りです。
【変更点】

*時間入力に対応。

*入力はテキストボックスだけでなく、セレクトタグにも対応。

*大幅なパフォーマンスアップ。

*prototype.js 1.6 に完全対応。（dom:loaded など）

*日本の祝日判定の修正。

*css のレイアウトを修正。

*初期値は当日ではなく空文字に変更。
【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.1.0/sample/calendar_usage.html

【download はこちら】

http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.0.zip

【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。
*rails, cakephp の helper 作成。

今回のバージョンアップは大きな機能アップが二点あります。

その一つは時間入力に対応したことです。

時間入力はテキストボックスではなく、セレクトタグが良いのではないかという意見もあったのですが、入力のしやすさを追求してテキストボックスにしてみました。

その際、不正な文字を入力されたときのために、簡単なバリデーション（エラー文言を変更可能）が実行されるようになっています。

もう一つはセレクトタグ対応です。

この機能はいかに cakephp の $html->dateTimeOptionTag や rails の date_select に対応するかを考えて設計・開発を進めました。将来的には helper や plugin を提供する予定です。

今後もさらなるバージョンアップを行っていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。

もう少しするとラボの公式サイトができて、そちらからスプーキーズラボプロダクトの最新リリースがダウンロードできるようになる予定です。

そちらも公開時にはこのブログでお知らせしますのでよろしくお願いします。

prototype.js ベースの日付選択用 javascript ライブラリ「protocalendar.js」を公開しました。

rails や cakephp でアプリケーションを作っていて、セレクトタグでは日付を選択し辛いと感じていました。

また、オープンソースの Date Picker ライブラリでは機能不足、もしくはオーバースペック過ぎて手頃なものがないと感じていました。

そこで、社内で prototype.js ベースの日付選択用ライブラリを作ってみようということになり作ってみました。

今後もバージョンアップしていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。

【特徴】
*prototype.js ベース（1.5 以降）。
*シンプルで軽量。
*MIT LICNESE
*16のローカライゼーションに対応。
*フォーカスでカレンダー表示。（トリガーを追加可能）
*日付フォーマットを変更可能。
*日付のラベル表示が可能。（フォーマットも変更可能）
*年・月を直接変更可能。（年選択時に前後指定年数を表示）
*カレンダーの開始曜日を変更可能。
*日本の祝日対応。（カスタマイズ可能）
*「今日」、「明日」、「明後日」などの任意の文字入力にも対応。（カスタマイズ可能）
*いくつかの標準スタイルを用意。（付属の paper, metal などの画像、 css も MIT LICNESE）
*effects.js と組み合わせてエフェクトに対応。（現在は、Appear のみ。他のエフェクトにも対応予定）
*クロスブラウザ （IE6 以降, Firefox2 以降, Safari2 以降, Opera9 以降）

【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.0/sample/calendar_usage.html

【download はこちら】

http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.0.zip

【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。