Sử dụng date-picker trong bootstrap

Datepicker jquery plugin hiện tại rất nhiều và không khó để sử dụng, tuy nhiên với những bạn đang phát triển giao diện sử dụng framework bootstrap thì theo mình sử dụng date-picker này là đơn giản và hiệu quả nhất

1. Chuẩn bị.

- Trước tiên các bạn cần download date-picker tại đây

- Giải nén file download và copy css & javascript của date-picker vào project của bạn

2. Tích hợp vào project

- Chúng ta thêm css & javascript vừa download về vào page các bạn cần sử dụng date-picker

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/datepicker.css" rel="stylesheet" />

 

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

- Copy textbox này vào phần mà bạn muốn hiển thị date-picker

<asp:TextBox ID="txtFromDay" runat="server" CssClass="form-control datepicker"></asp:TextBox>

- Phần javascript đơn giản như sau

$(function () {
  $('.datepicker').datepicker({ format: "dd//mm/yyyy" }).on('changeDate', function (ev) {
    $(this).datepicker('hide');
  });
});

- Ở đây, plugin sẽ thiết lập các input có class .datepicker thành các date-picker cho chúng ta thao tác click để lựa chọn ngày tháng, các bạn có thể định dạng ngày tháng theo ý mình ở phần format của đoạn javascript trên.

3. Kết luận.

- Theo ý kiến cá nhân mình thì đây là một plugin in rất tốt nếu các bạn đang sử dụng bootstrap để phát triển layout. Tích hợp dễ dàng và tùy biến cao.

Download Source

Related Post


Tạo trò chơi rắn săn mồi với HTML5 và jQuery
Saturday, April 26, 2014
Rắn săn mồi là một trò chơi đơn giản và khá thú vị trên các máy di động trước đây, với javascript & html5 chúng ta cũng có thể viết được trò chơi này trên web. Hôm nay mình muốn giới thiệu một đoạn code nhỏ của trò chơi này mà mình tham khảo được trên mạng
Cách tạo Ribbon Menu bằng CSS3
Monday, April 14, 2014
Ở bài này tôi muốn giới thiệu đến các bạn một menu css3 khá đẹp mắt đó là Ribbon Menu, đặc biệt nó chỉ sử dụng html & css3 nhưng đem lại hiểu quả khá đẹp mắt và được sử dụng khá rộng rãi trong các website như nhà hàng, quán cafe.... Nó cũng hoạt động khá tốt trên hầu hết các trình duyệt.
Search

Đăng ký nhận bài mới


Category

Blog Archive