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祭日を考慮する
http://0-oo.net/sam/google-calendar-holidays/jquery-ui-datepicker.php上記のサンプルのように、Google Calendar APIのJavaScriptをインポートするだけでいい。 <script src="">http://0-oo.googlecode.com/svn/gcalendar-holidays.js">
参考文献
http://0-oo.net/sbox/javascript/google-calendar-holidaysToolTip「...」を非表示にする
対応策
* 「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
おまけ１：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
おまけ２：ダメダメ案（サンプル抜粋）
* 以下のサイトのサンプルの「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("},")