【ASP.NET】 jQuery / Datepicker導入編

ダウンロード(JQuery

http://jqueryui.com/download

サンプル

 * JQueryのDatepickerを利用したTextBoxをユーザコントロール化する

WebUserControl1.ascx(ユーザコントロール化)

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb" Inherits="WebApplication1.WebUserControl1" %>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

WebUserControl1.ascx.vs(ユーザコントロール化)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim uri As Uri = New Uri(Request.Url, Request.ApplicationPath)
    Dim url As String = uri.ToString()

    Dim linkJQueryCss As HtmlLink = New HtmlLink()
    linkJQueryCss.Href = url & "jquery/demos/demos.css"
    linkJQueryCss.Attributes.Add("rel", "stylesheet")
    linkJQueryCss.Attributes.Add("type", "text/css")
    Page.Header.Controls.Add(linkJQueryCss)
    Dim linkCss As HtmlLink = New HtmlLink()
    linkCss.Href = url & "jquery/themes/base/jquery.ui.all.css"
    linkCss.Attributes.Add("rel", "stylesheet")
    linkCss.Attributes.Add("type", "text/css")
    Page.Header.Controls.Add(linkCss)
    Dim csMgr = Page.ClientScript

    Dim jquery = "<script src='jquery/jquery-1.6.2.js'></script>"
    If Not csMgr.IsClientScriptBlockRegistered("Jquery") Then
        csMgr.RegisterClientScriptBlock( _
            Me.GetType(), "Jquery", jquery, False)
    End If

    Dim jqueryUiCore = "<script src='" & url & "jquery/ui/jquery.ui.core.js'></script>"
    If Not csMgr.IsClientScriptBlockRegistered("JqueryUiCore") Then
        csMgr.RegisterClientScriptBlock( _
            Me.GetType(), "JqueryUiCore", jqueryUiCore, False)
    End If

    Dim jqueryUiWidget = "<script src='" & url & "jquery/ui/jquery.ui.widget.js'></script>"
    If Not csMgr.IsClientScriptBlockRegistered("JqueryUiWidget") Then
        csMgr.RegisterClientScriptBlock( _
            Me.GetType(), "JqueryUiWidget", jqueryUiWidget, False)
    End If

    Dim jqueryUiDatepicker = "<script src='" & url & "jquery/ui/jquery.ui.datepicker.js'></script>"
    If Not csMgr.IsClientScriptBlockRegistered("JqueryUiDatepicker") Then
        csMgr.RegisterClientScriptBlock( _
            Me.GetType(), "JqueryUiDatepicker", jqueryUiDatepicker, False)
    End If

    Dim sb1 = New StringBuilder()
    sb1.AppendLine("$(function() {")
    sb1.AppendLine("	$('#" & Me.TextBox1.ClientID & "').datepicker({")
    sb1.AppendLine("		showOn: 'button',")
    sb1.AppendLine("		buttonImage: '" & url & "jquery/demos/images/calendar.gif',")
    sb1.AppendLine("		buttonImageOnly: true,")
    sb1.AppendLine("		buttonText: '',")
    sb1.AppendLine("		dateFormat: 'yy/mm/dd',")
    sb1.AppendLine("		minDate: new Date(2011, 9, 1),")
    sb1.AppendLine("		maxDate: new Date(2011, 11, 31)")
    sb1.AppendLine("	});")
    sb1.AppendLine("});")

    If Not csMgr.IsClientScriptBlockRegistered("DatePicker") Then
        csMgr.RegisterClientScriptBlock( _
            Me.GetType(), "DatePicker", sb1.ToString(), True)
    End If

End Sub

WebForm1.aspx

* ただ、作成したユーザーコントロールを貼り付けただけ。
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>

<%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="">http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    </div>
    </form>
</body>
</html>

関連記事

カレンダー入力について

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

Datepickerあれこれ編(この記事の続きにあたる)

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

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

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