ASP.NET MVC: DateTimePicker

เพิ่งจะได้มีโอกาสทำหน้า Page ของ aps.net mvc และในรุ่นนี้ไม่มี server control สำหรับรับข้อมูลแบบ DateTime เหมือนก่อน

หลังจากไปค้นหาข้อมูลและทดลองทำตามพอจะสรุปเป็นขั้นตอนวิธีที่สามารถทำให้ Textbox ของเรารับค่า DateTime ได้ด้วยไม่กี่ขั้นตอน

1. เปิด Project ด้วย Visual Studio (ของผมเป็นรุ่น 2015)
2. เปิด NuGet Package Manager และค้นหาด้วยคำว่า datetimepicker
3. เลือก Bootstrap.v3.Datetimepicker by Eonasdan กด Install
   
4. เปิดไฟล์ BundleConfig.cs ในโฟลเดอร์ App_Start และให้เพิ่มรายละเอียดของ datetimepicker และ moment เข้าไป

   bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
   "~/Scripts/bootstrap.js",
   "~/Scripts/bootstrap-datetimepicker.js",
   "~/Scripts/datetimepicker-setup.js",
   "~/Scripts/respond.js"));
   
   bundles.Add(new ScriptBundle("~/bundles/moment").Include(
   "~/Scripts/moment.js"));

5. ทำการอ้างอิงไฟล์ที่จำเป็นสำหรับใช้ DateTimePicker โดยเปิดไฟล์งานที่ต้องการ หรือ อาจใส่ที่ไฟล์ _Layout.cshtml เลยก็ได้ โดยสิ่งที่ต้องมี คือ

      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @Scripts.Render("~/bundles/moment")

   ซึ่งในทางปฎิบัติโดยทั่วไปไฟล์ Script ที่จำเป็นต้องใช้คือ jquery, moment, bootstrap, bootstrap-datetimepicker ให้ทดลอง ViewSource และตรวจสอบไฟล์ข้างต้นว่ามีการเรียกใช้งานครบถ้วนหรือไม่

6. ที่ไฟล์งานให้กำหนดรายละเอียดของ control และ เพิ่ม jquery ดังตัวอย่าง

   <div class="form-group">
         @Html.LabelFor(model => model.AvailableForAttendanceFrom, htmlAttributes: new { @class = "control-label col-md-2" })
         <div class="col-md-10">
             @Html.EditorFor(model => model.AvailableForAttendanceFrom, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
         </div>
   </div>

   <script type="text/javascript">
       $(function () {
            $('.datetimepicker').datetimepicker();
       })
   </script>

7. รัน Project และดูผล
   

สำหรับการใช้งาน Datetimepicker ในขั้นสูงขึ้นสามารถศึกษาเพิ่มเติมได้ที่ลิงค์

https://eonasdan.github.io/bootstrap-datetimepicker/

NONTAPON RATTANAPITTAYAPORN

More Posts