【ASP.NET】 jQuery / Datepicker あれこれ編

JQuery・Datepickerあれこれ

画像ボタンの位置を調整する

<style type="text/css">
.ui-datepicker-trigger {
     margin-left:5px;
     margin-top: 8px;
     margin-bottom: -3px;
}
</style>

参考文献

http://www.fbloggs.com/2009/04/16/how-to-style-the-button-image-in-jquery-datehandler-ui/

日曜を選択不可にする

サンプル抜粋

* 以下のサイトのサンプルの「dateFormat: 'yy/mm/dd',」と「minDate: new Date(2011, 9, 1),」の間に以下を記述
http://blogs.yahoo.co.jp/dk521123/26923987.html
sb1.AppendLine("	beforeShowDay : function(date) {")
sb1.AppendLine("	    if (date.getDay() == 0) {")
sb1.AppendLine("	        return [false];")
sb1.AppendLine("	    } else {")
sb1.AppendLine("	        return [true];")
sb1.AppendLine("	    }")
sb1.AppendLine("	},")

参考文献

http://d.hatena.ne.jp/s-yano/20090311/p3


ToolTip「...」を非表示にする

対応策

 * 「buttonText: ''」を設定

サンプル

* 以下のサイトのサンプル参照
http://blogs.yahoo.co.jp/dk521123/26923987.html
sb1.AppendLine("		buttonText: '',")

日付TextBoxを____/__/__とするには(JQuery・Masked Inputとの併用)

 * テキスト入力欄に____/__/__などを指定したフォーマットで入力させるようにするには、jQueryプラグイン・Masked Inputと併用する(ただし、併用にはバグがあるらしい。実際、併用してみたが、特におかしくなかったけど)

サンプル(一部抜粋)

' masked inputをインポートする
Dim jqueryMaskedInput = "<script src='" & url & "jquery/ui/jquery.maskedinput-1.3.js'></script>"
If Not csMgr.IsClientScriptBlockRegistered("jqueryMaskedInput") Then
    csMgr.RegisterClientScriptBlock( _
        Me.GetType(), "jqueryMaskedInput", jqueryMaskedInput, False)
End If

' ・・・以下、中略・・・

sb1.AppendLine("$(function() {")
' ・・・以下、中略・・・
' マスクする(日付は、『$('#クラス名').mask('9999/99/99');』ってだけ!超簡単!!)
sb1.AppendLine("	$('#" & Me.TextBox1.ClientID & "').mask('9999/99/99');")
sb1.AppendLine("});")

TextBoxがMaxLengthが設定されなくなる問題

* 良く分からんがMaxLengthを設定しても設定が利かなくなるケースがあったので以下のように対応。

サンプル

    Dim sb1 = New StringBuilder()
    sb1.AppendLine("$(function() {")
    sb1.AppendLine("	$('#" & Me.TextBox1.ClientID & "').datepicker({")
    ' ・・・以下、中略・・・
    sb1.AppendLine("	});")

    ' ★MaxLengthを10に設定★
    sb1.AppendLine("$('#" & Me.TextBox1.ClientID & "').attr('maxlength', '10')")

TextBoxが非活性した時に画像も非活性にする

 * TextBoxが非活性なのに、何も制御をしないと画像アイコンは選択できる。画像も非活性にするサンプルを記す。

サンプル

Public Property Enabled() As Boolean
    Set(value As Boolean)
        Me.TextBox1.Enabled = value
    End Set

    Get
        Return Me.TextBox1.Enabled
    End Get
End Property

' ★PageLoadではなく、PreRender イベントにしているのがミソ★
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

    Dim uri As Uri = New Uri(Request.Url, Request.ApplicationPath)

    ' ・・・以下、中略・・・


    Dim sb1 = New StringBuilder()
    sb1.AppendLine("$(function() {")
    sb1.AppendLine("	$('#" & Me.TextBox1.ClientID & "').datepicker({")
    ' ・・・以下、中略・・・
    sb1.AppendLine("	});")

    ' Enableをチェックする
    If Not Me.Enabled Then
        ' ★Enable = Falseの場合、disableを記載する★
        sb1.AppendLine("$('#" & Me.TextBox1.ClientID & "').datepicker('disable')")
    End If

    sb1.AppendLine("});")

End Sub

おまけ1:TextBoxが非活性の場合、画像を表示させない(サンプル抜粋)

' ★PageLoadではなく、PreRender イベントにしているのがミソ★
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
    ' Enableをチェックする
    If Not Me.Enabled Then
        ' ★Enable = Falseの場合、JavaScriptを実行させない★
        Return
    End If

    ' 以降、JavaScriptを動的に生成
    Dim uri As Uri = New Uri(Request.Url, Request.ApplicationPath)
    ' ・・・以下、略・・・
End Sub

おまけ2:ダメダメ案(サンプル抜粋)

* 以下のサイトのサンプルの「dateFormat: 'yy/mm/dd',」と「minDate: new Date(2011, 9, 1),」の間に以下を記述すると、カレンダーが1回表示されるが非活性にはなる(ダメダメでも記録として残しておく)
http://blogs.yahoo.co.jp/dk521123/26923987.html
sb1.AppendLine("beforeShow : function(input, inst) {")
sb1.AppendLine("    var textBoxObj = document.getElementById('")
sb1.AppendLine(Me.TextBox1.ClientID & "');")
sb1.AppendLine("    if (textBoxObj.disabled == true) {")
sb1.AppendLine("        $('#" & Me.TextBox1.ClientID & "').datepicker('disable');")
sb1.AppendLine("    } else {")
sb1.AppendLine("        $('#" & Me.TextBox1.ClientID & "').datepicker('enable');")
sb1.AppendLine("    }")
sb1.AppendLine("},")

関連記事

JQueryの利用(Datepicker導入編)

http://blogs.yahoo.co.jp/dk521123/26923987.html

【JS】【jQuery】入力補助(日付編) ~ Datepicker & Masked Input の使用 ~

http://blogs.yahoo.co.jp/dk521123/27012701.html

今後役立ちそうなサイト

土曜日と日曜日を変える

http://d.hatena.ne.jp/aroundthedistance/20101209/1291871545

日本仕様のカレンダーにするには

http://fdays.blogspot.com/2010/07