انتزاع
بسیاری از مبتدیان و گاهی اوقات توسعه دهندگان با تجربه نیز با این سوال روبرو می شوند که چگونه دو تاریخ را با هم مقایسه کنند. در این مقاله من این تفاوت را شرح داده ام و همه چیزهایی را که به یک مبتدی کمک می کند توضیح داده ام. اگر اشکالی دارد یا پیشنهادی دارید، در قسمت نظرات آن را ذکر کنید. امروز یکی از دوستان به من گفت که در یک مصاحبه در طول فرآیند تست ماشین با همین سوال مواجه شده است.
اتاق اولیه
مرحله 1
ویژوال استودیو را باز کنید و یک وب سایت خالی ایجاد کنید، یک نام مناسب مانند DateCompare ارائه دهید .
مرحله 2
در Solution Explorer، وب سایت خالی خود را دریافت می کنید، سپس فرم های وب را اضافه می کنید
DateCompare (وب سایت خالی شما). کلیک راست کرده و Add New Item و سپس Web Form را انتخاب کنید. نام آن را DateCompare.aspx بگذارید.
اتاق طراحی
مرحله 3 فایل
DateCompare.aspx
را باز کنید و کدی برای طراحی برنامه بنویسید.
ابتدا یک افزونه jQuery را به قسمت head خود اضافه کنید. در اینجا من از jquery-1.9.1.js برای اهداف نمایشی استفاده کردم.
موارد زیر نشان می دهد که چگونه آن را به صفحه خود اضافه کنید:
- <div>
- <div>
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <th>First Date
- </th>
- <th>Second Date
- </th>
- </tr>
- <tr>
- <td>
- <asp:TextBox ID="txtDate1" runat="server" />
- </td>
- <td>
- <asp:TextBox ID="txtDate2" runat="server" />
- </td>
- <td>
- <asp:Button ID="btnDiff" runat="server" OnClick="btnDiff_Click" Text="Calculate Date" />
- </td>
- </tr>
- </table>
- </div>
- </div>
اکنون طراحی به شکل زیر به نظر می رسد:
اکنون مقداری اسکریپت برای jQuery بنویسید. در اینجا ما کدی برای نمایش و پنهان کردن کد جی کوئری می نویسیم:
- <script>
- $(document).ready(
- /* This is the function that will get executed after the DOM is fully loaded */
- function () {
- $("#txtDate1").datepicker({
- changeMonth: true,//this option for allowing user to select month
- changeYear: true //this option for allowing user to select from year range
- });
- $("#txtDate2").datepicker({
- changeMonth: true,//this option for allowing user to select month
- changeYear: true //this option for allowing user to select from year range
- });
- }
- );
- </script>
مقداری CSS برای ظاهر و احساس در قسمت head صفحه اضافه کنید:
- <style type="text/css">
- body {
- color: #333;
- text-align: center;
- background-color: aqua;
- }
- </style>
اکنون صفحه شما به شکل زیر است: