توضیحات و دانلود

DateTimePicker در GridView با استفاده از پلاگین DateTimePicker جی کوئری در ASP.Net
0 0
DateTimePicker در GridView با استفاده از پلاگین DateTimePicker جی کوئری در ASP.Net

با سلام در این مقاله توضیح خواهیم داد که چگونه از پلاگین جی کوئری DateTimePicker در کنترل GridView استفاده کنید.
برای این مقاله من از پلاگین جی کوئری DateTimePicker DynDateTime استفاده خواهیم کرد .
کد GridView
برای شروع از یک GridView ساده با 2 ستون که در آن ستون اول نام شخص است و ستون دوم یک TemplateField با ReadOnly TextBox برای وارد کردن تاریخ و زمان تولد فرد است .

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Person" />
        <asp:TemplateField HeaderText="Date Of Birth">
            <ItemTemplate>
                <asp:TextBox ID="txtDOB" runat="server" ReadOnly="true" class = "Calender" />
                <img src="calender.png" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />

TextBox ساخته شده است تاریخ و زمان تولد ReadOnly را می پذیرد. این کار را برای جلوگیری از تایپ کردن متن در TextBox انجام داده ایم.  همچنین ویژگی class = "Calender" را به TextBox اضافه میکنیم تا بتوانم TextBox را برای تاریخ با استفاده از انتخابگر جی کوئری انتخاب کنیم .
در نهایت یک دکمه برای ذخیره سوابق به پایگاه داده وجود دارد.
اعمال پلاگین جی کوئری DateTimePicker 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type = "text/javascript">
    $(document).ready(function () {
        $(".Calender").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });
</script>

 اسکریپت بالا را روی صفحه MasterPage قرار دهید تا در آن  پلاگین DateTimePicker را اعمال کنید. این DateTimePicker به طور خودکار به تمام TextBoxes که  class = "Calender"

قرار دارد .
عکس روی صفحه
این همه کاری است که شما باید انجام دهید تا پلاگین جی کوئری DateTimePicker را در کنترل GridView ASP.Net اعمال کنید.

 

دريافت Dates Server Side
کد زیر چگونگی انجام  تاریخ های ارسال شده توسط کاربر توسط حلقه از طریق ردیف کنترل GridView را نشان میدهد .
C #

protected void btnSave_Click(object sender, EventArgs e)
{
    foreach (GridViewRow row in GridView1.Rows)
    {
        DateTime dob = DateTime.Parse(Request.Form[row.FindControl("txtDOB").UniqueID]);
        //Save the date to Database here
    }
}

VB.Net

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As EventArgs)
        For Each row As GridViewRow In GridView1.Rows
            Dim dob As DateTime = DateTime.Parse(Request.Form(row.FindControl("txtDOB").UniqueID))
            'Save the date to Database here
        Next
End Sub

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :