Datepickers là các yếu tố giao diện người dùng rất phổ biến mà chúng ta sử dụng rất nhiều trong cuộc sống hàng ngày. Cho dù chúng tôi đang đặt lịch hẹn hay thiết lập hồ sơ, công cụ chọn ngày sẽ giảm thiểu nỗ lực nhập liệu của chúng tôi. Có hai loại bộ chọn ngày chính, một là phương pháp nhấn và chọn ngày thông thường, trong khi loại còn lại là bộ chọn phạm vi ngày. Dựa trên nơi bạn sử dụng công cụ hẹn hò, giao diện của chúng sẽ thay đổi. Trong bộ sưu tập bộ chọn ngày bootstrap này, chúng tôi đã thu thập cả bộ chọn ngày một lần nhấn và bộ chọn phạm vi ngày
Trừ khi bạn đang tạo một ứng dụng lên lịch, một công cụ chọn ngày đơn giản sẽ thực hiện công việc. Bởi vì trong ứng dụng đặt lịch, lịch hẹn hò đóng vai trò chính. Ví dụ: nếu bạn đã sử dụng các ứng dụng lên lịch truyền thông xã hội như CoSchedule và Hootsuite, bạn sẽ biết rằng tất cả các hành động được thiết kế xung quanh lịch. Nhưng công cụ hẹn giờ trong một biểu mẫu hoặc trong một trang web là một phần tử giao diện người dùng đơn giản được sử dụng để nhận thông tin đầu vào không có lỗi. Dựa vào mục đích mà cách điều hướng của lịch datepicker hoàn toàn khác
Nếu bạn đang sử dụng công cụ chọn ngày trong biểu mẫu đăng ký sự kiện, thì bạn phải chỉ cung cấp ngày của sự kiện để người dùng chọn. Nhưng trên trang web du lịch hoặc trên trang web khách sạn, chúng tôi phải hiển thị cả năm và những ngày sắp tới để người dùng dễ dàng chọn ngày thuận tiện cho họ. Bất kể bạn sử dụng công cụ hẹn hò với mục đích gì, có một ví dụ dành cho bạn trong ví dụ về công cụ hẹn hò bootstrap này. Cho dù bạn phải chỉ hiển thị những ngày đã chọn hay chỉ những ngày cuối tuần trong lịch hẹn giờ, vẫn có một thiết kế dành cho bạn tại đây
Lịch V11
Trong mẫu lịch bootstrap V11, bạn sẽ có một thiết kế bảng chọn ngày đơn giản và dễ hiểu. Lịch ngày được in đậm, to để người xem dễ dàng chọn ngày theo ý muốn. Bạn cũng nhận được các tùy chọn hữu ích như Hôm nay, Xóa và Đóng ở cuối lịch, đây là một bổ sung đáng suy nghĩ. Thiết kế bộ đếm ngày này là tốt nhất để chọn một ngày duy nhất. Vì lịch mở dưới dạng cửa sổ phương thức nên bạn không phải lo lắng về việc lắp công cụ chọn ngày này vào biểu mẫu hoặc trang web có không gian chật hẹp của mình
Thông tin / Tải xuống Bản trình diễn
Lịch V09
Công cụ hẹn hò bootstrap V09 cũng tương tự như mẫu V11 đã đề cập ở trên. Tuy nhiên, lịch này cho phép bạn chọn cả ngày và giờ. Nếu bạn đang tìm kiếm một công cụ chọn ngày bootstrap để sử dụng trong biểu mẫu hoặc trang đặt trước của mình, thì đây sẽ là một lựa chọn tuyệt vời
Người sáng tạo đã quản lý một cách thông minh để kết hợp lịch và đồng hồ làm việc bên trong tiện ích lịch. Nhờ đó, bạn có thể tiết kiệm dung lượng trên trang web và người dùng cũng có thể nhanh chóng chọn ngày giờ. Các biểu tượng được sử dụng để hiển thị các tùy chọn nhằm duy trì giao diện rõ ràng hơn;
Thông tin / Tải xuống Bản trình diễn
Lịch V03
Đối với những người muốn có một công cụ hẹn hò bootstrap với khả năng chọn một phạm vi, mẫu này là lựa chọn tốt nhất cho bạn. Người sáng tạo đã đặt 2 lịch cạnh nhau để khán giả dễ dàng chọn ngày mà không bị nhầm lẫn. Nếu bạn không muốn có hai lịch, bạn có thể chỉnh sửa mã và đưa các hàm phạm vi vào một lịch duy nhất. Người tạo đã cung cấp cho bạn một mẫu chắc chắn với tập lệnh mã linh hoạt. Do đó, bạn có thể chỉnh sửa mẫu và sử dụng nó để tạo lịch tùy chỉnh của mình ngay lập tức
Thông tin / Tải xuống Bản trình diễn
Lịch V18
Công cụ chọn ngày khởi động V18 cho phép bạn đặt phạm vi ngày và cho phép khán giả chọn trong phạm vi ngày nhất định. Nếu bạn đang tổ chức một sự kiện hoặc bán vé cho một sự kiện, công cụ hẹn hò bootstrap sẽ rất hữu ích. Vì đây là một mô hình khái niệm, các chức năng không rõ ràng, nhưng bạn có thể có ý tưởng. Bạn có thể sử dụng ý tưởng của mẫu này làm cơ sở và sử dụng nó cho ứng dụng đặt lịch sự kiện hoặc lịch trong bảng điều khiển quản trị trang web
Thông tin / Tải xuống Bản trình diễn
Lịch V14
V14 là một công cụ hẹn hò bootstrap đơn giản với tất cả các tùy chọn cần thiết được tạo sẵn cho bạn. Bạn có các tùy chọn điều hướng dễ sử dụng và một công cụ đánh dấu đầy màu sắc đẹp mắt để biểu thị ngày hiện tại. Lịch tự động hiển thị ngày ngay cả khi người dùng trực tiếp nhập giá trị, đây là điều mà hầu hết các lịch không có. Người dùng có thể dễ dàng chuyển đến ngày họ muốn và chọn nó một cách dễ dàng nhờ bố cục thân thiện của mẫu này. Bản thân thiết kế mặc định hoạt động trơn tru từ phía giao diện người dùng. Khi bạn đã thực hiện các thay đổi mình muốn, bạn có thể sử dụng chúng trên trang web hoặc ứng dụng của mình
Thông tin / Tải xuống Bản trình diễn
Bootstrap Datepicker Ví dụ v2
Một trong những lĩnh vực phổ biến nhất mà công cụ chọn ngày được sử dụng là biểu mẫu đăng ký. Cung cấp tùy chọn để dễ dàng chọn ngày giữ cho người dùng trong biểu mẫu và cũng cho họ biết ngày của ngày đó. Trong biểu mẫu đăng ký trình chọn ngày khởi động này, nhà thiết kế đã coi tháng và năm là các phần tử riêng biệt. Do đó, bạn có thể dễ dàng chọn tháng và năm bạn muốn. Toàn bộ biểu mẫu đăng ký được thực hiện bằng khung Bootstrap 4. Bạn có thể dễ dàng sử dụng mã trong thiết kế của mình và cũng có thể tùy chỉnh biểu mẫu theo nhu cầu thiết kế của bạn
Thông tin / Tải xuống Bản trình diễn
Biểu mẫu đăng ký v11
Biểu mẫu đăng ký v11 cũng từ cùng một người tạo biểu mẫu V2 đã đề cập ở trên. Trong biểu mẫu này, bạn có hai tùy chọn chọn ngày để chọn ngày nhận phòng và ngày trả phòng. Thiết kế lịch được sử dụng trong biểu mẫu này hơi khác so với thiết kế bạn đã thấy trong biểu mẫu V2. Lịch hẹn giờ này là một lịch nhìn sang trọng với các đường viền dày để phân biệt từng ngày trên lịch. Công cụ đánh dấu màu vàng được sử dụng trong thiết kế mặc định, nhưng bạn có thể sử dụng bất kỳ màu nào theo thiết kế của mình. Vì mẫu này sử dụng tập lệnh CSS3 nên nó hỗ trợ tất cả các màu hiện đại và hiệu ứng hoạt hình. Cấu trúc mã trình chọn ngày khởi động này được giữ đơn giản để bạn dễ dàng tích hợp với đặt chỗ của mình hoặc các hệ thống tương tự khác
Thông tin / Tải xuống Bản trình diễn
Bootstrap Biểu mẫu tìm kiếm Datepicker v2
Datepickers cũng được sử dụng trong biểu mẫu tìm kiếm để cho phép người dùng dễ dàng thu hẹp kết quả tìm kiếm. Nếu bạn đang tạo một biểu mẫu tìm kiếm cho một trang web du lịch hoặc trang web khách sạn, công cụ hẹn hò bootstrap này sẽ là một lựa chọn tốt. Trong biểu mẫu này, bạn cũng có hai bộ chọn ngày. Nếu bạn thích mẫu V11 đã đề cập ở trên, nhưng bạn muốn có một lịch hiện đại, thiết kế này có thể gây ấn tượng với bạn. Lịch datepicker bootstrap được làm lớn hơn với các phông chữ hợp thời trang để người dùng có thể dễ dàng chọn ngày họ muốn. Bạn lấy toàn bộ file nguồn trong thư mục download nên dễ dàng làm việc với template này
Thông tin / Tải xuống Bản trình diễn
Biểu mẫu tìm kiếm v20
Đôi khi, người hẹn hò cần chọn một phạm vi ngày. Ví dụ: nếu bạn đang đặt phòng khách sạn, hãy cung cấp tùy chọn chọn phạm vi ngày để người dùng dễ dàng điền ngày nhận phòng và ngày trả phòng. Để làm cho việc lựa chọn phạm vi dễ dàng hơn, nhà phát triển đã cung cấp cho bạn một lịch rộng hiển thị các tháng liên tiếp cạnh nhau. Lịch mặc định lớn với phông chữ lớn để người dùng có thể dễ dàng đọc và tương tác với nó ngay cả trên các thiết bị màn hình nhỏ. Các hình dạng và cách phối màu được xử lý phù hợp mang lại một cái nhìn độc đáo cho lịch công cụ chọn ngày bootstrap và cũng dễ sử dụng
Thông tin / Tải xuống Bản trình diễn
Biểu mẫu tìm kiếm v16
Mẫu tìm kiếm v16 cũng có lựa chọn phạm vi ngày tương tự như trong mẫu V20. Ở dạng này, bạn sẽ có một lịch hơi khác với tông màu cam. Điểm độc đáo trong hình thức tìm kiếm này là giao diện theo thẻ. Trong tất cả các tab, lịch hẹn giờ hoạt động hoàn hảo. Nếu bạn đang tìm kiếm thiết kế giao diện tab trực quan, hãy xem bộ sưu tập thiết kế tab bootstrap của chúng tôi. Do khung HTML5, CSS3 và Bootstrap 4 mới nhất, biểu mẫu này tải nhanh hơn và trông cũng tự nhiên. Bằng cách thực hiện một vài điều chỉnh đối với mã, bạn có thể sử dụng mẫu này trong trang web hoặc ứng dụng của mình
Thông tin / Tải xuống Bản trình diễn
Biểu mẫu tìm kiếm v14
Search Form v14 là phiên bản khác của form v20 nói trên. Chỉ có một số điều chỉnh thiết kế trong lịch ngày tháng này, nhưng nó làm cho lịch thanh lịch hơn. Một đường kẻ dọc nhỏ được sử dụng để phân tách các tháng, điều này sẽ giúp người dùng dễ dàng tương tác với lịch. Xuyên suốt thiết kế, hiệu ứng đổ bóng được sử dụng một cách thông minh để mang lại vẻ nổi cho hình thức. Mặc dù thiết kế ban đầu của mẫu là dành cho tiện ích tìm kiếm, nhưng bạn cũng có thể sử dụng nó cho các mục đích khác. Cơ sở mã vững chắc cho phép bạn hoàn toàn tự do tùy chỉnh mẫu theo nhu cầu của mình
Thông tin / Tải xuống Bản trình diễn
Ví dụ về biểu mẫu đăng ký linh hoạt
Như tên của nó, ví dụ về bộ đếm ngày này được thiết kế cho một hệ thống đặt chỗ. Dù là mẫu concept nhưng mọi tính năng và tùy chọn đều hoạt động trơn tru. Trước tiên, người dùng có thể chọn chuyên gia họ muốn, sau đó chọn ngày và giờ mong muốn từ công cụ chọn ngày. Các hiệu ứng hoạt hình được giữ ở mức đơn giản nhất có thể để người dùng có thể chuyển đổi liền mạch giữa quy trình. Nếu bạn đang xây dựng một ứng dụng bằng cách sử dụng các nguyên tắc thiết kế thông thạo của Microsoft, thì ví dụ về trình ghi ngày khởi động này sẽ là một lựa chọn tốt
Thông tin / Tải xuống Bản trình diễn
Bootstrap Datepicker Summer Vibe
Như tên của nó, thiết kế datepicker này sử dụng một khái niệm mùa hè. Một ngày nắng dễ chịu trong một hình ảnh bãi biển được sử dụng trên phần tiêu đề lịch. Bạn có thể sử dụng khái niệm này và có thể sử dụng các hình ảnh theo mùa khác nhau liên quan đến tháng cụ thể. Giống như trong tất cả các ví dụ về công cụ hẹn hò bootstrap khác, ví dụ này cũng sử dụng một lịch lớn đẹp mắt với khoảng cách rộng rãi giữa mỗi ngày. Do đó, người dùng di động cũng có thể dễ dàng tương tác với bộ lịch này. Bạn không có tùy chọn để đánh dấu và hiển thị ngày đã chọn hoặc các chức năng khác trong lịch này. Bằng cách giữ tập lệnh mã này làm cơ sở, bạn có thể tạo thiết kế tùy chỉnh của riêng mình ngay lập tức
Thông tin / Tải xuống Bản trình diễn
Bộ chọn phạm vi ngày phản ứng
Thay vì chỉ chọn từ và đến ngày, bạn có thể cung cấp tùy chọn chọn phạm vi ngày để làm cho nó tương tác nhiều hơn với người dùng. Ví dụ: trên trang web khách sạn, người dùng có thể chọn phạm vi ngày trước khi đặt phòng. Các tùy chọn điều hướng cơ bản trước và sau được cung cấp trong gói này; . Đúng như tên gọi, ReactJS được sử dụng để dễ dàng xử lý các tương tác động. Người tạo đã cung cấp cho bạn toàn bộ tập lệnh mã của thiết kế này;
Thông tin / Tải xuống Bản trình diễn
Bootstrap Datepicker
Những ai muốn có một thiết kế datepicker nhỏ gọn nhưng tương tác, thì thiết kế này chắc chắn sẽ thu hút sự chú ý của bạn. Người sáng tạo đã sử dụng các hoạt ảnh nảy nhanh để thu hút sự chú ý của người dùng và lịch lớn hơn hợp lý để tương tác dễ dàng hơn. Mặc dù lịch mặc định nhỏ nhưng người tạo đã làm cho việc điều hướng trở nên dễ dàng hơn và mang lại cảm giác tự nhiên hơn. Do đó, người dùng sẽ thấy thiết kế datepicker này dễ sử dụng. Do tính chất nhỏ gọn của thiết kế này, bạn có thể sử dụng nó trên bất kỳ biểu mẫu và ứng dụng nào mà không gặp vấn đề gì
Thông tin / Tải xuống Bản trình diễn
Bộ chọn ngày và giờ
Cái này lớn hơn một chút khi so sánh với các ví dụ về công cụ hẹn hò bootstrap khác, nhưng xét về tính dễ sử dụng, kích thước này đáng để đánh đổi. Đúng như tên gọi, cái này cho phép bạn chọn cả ngày và giờ. Hiện tại, bạn có một thanh trượt có thể kéo và các tùy chọn tăng/giảm để lựa chọn chính xác. Nếu bạn đang làm một phần mềm đặt lịch, thiết kế datepicker với các tùy chọn nhập liệu hữu ích như thế này sẽ giúp ích rất nhiều cho người dùng của bạn. Vì là mẫu concept nên tác giả chỉ đưa ra những option cơ bản. Bạn có thể thêm các tính năng bạn muốn và có thể biến nó thành một tiện ích công cụ hẹn hò hoàn chỉnh theo yêu cầu của bạn
Thông tin / Tải xuống Bản trình diễn
Bộ chọn ngày giao diện người dùng jQuery
Đây là một thiết kế datepicker nhỏ gọn, nhưng cái này có giao diện và hình ảnh động khác so với Bootstrap Datepicker đã đề cập ở trên. Do hoạt ảnh đang mở, bạn có thể phải giải phóng một số dung lượng bên dưới tùy chọn bộ đếm ngày. Ảnh động đẹp mắt trong ví dụ này; . Ngày hiện tại được đánh dấu gọn gàng trong lịch, cộng với các mũi tên điều hướng gọn gàng được đưa ra ở trên cùng để dễ dàng chuyển đến các tháng khác nhau. Như bạn có thể thấy, thiết kế datepicker này có tất cả các tùy chọn cơ bản. Bạn có thể làm việc trên các tính năng tùy chỉnh và có thể tích hợp công cụ đếm ngày vào trang web/ứng dụng của mình mà không gặp trở ngại nào
Thông tin / Tải xuống Bản trình diễn
mdPickers
Thiết kế datepicker này được thực hiện bằng cách sử dụng thiết kế vật liệu. Các yếu tố hiện đại hơn và các tùy chọn sử dụng nhanh hơn, điều mà hầu hết người dùng thiết bị di động và máy tính để bàn sẽ yêu thích. Vì nó là một mô hình khái niệm, người tạo đã cung cấp cho bạn một loạt các tính năng và tùy chọn. Mặc dù đây là một mẫu miễn phí nhưng mọi yếu tố đều hoạt động hoàn hảo, giống như trong một thiết kế cao cấp. Do đó, các nhà phát triển có thể dễ dàng làm việc với đoạn mã này và có thể sử dụng nó trong dự án của họ mà không gặp bất kỳ sự cố nào
Thông tin / Tải xuống Bản trình diễn
MD Datepicker Demo
Nhà phát triển Sean Larkin đã đưa ra các điều kiện khác nhau trong ví dụ về công cụ hẹn hò bootstrap này. Ví dụ: nếu bạn chỉ mở cửa vào cuối tuần, thì bạn chỉ có thể hiển thị các ngày cuối tuần trên lịch. Vì vậy, người dùng có thể chọn ngày hoàn hảo mà họ muốn và bạn có thể giảm các mục nhập sai. Lịch thực sự linh hoạt và cuộn mượt mà, vì vậy người dùng di động sẽ thích sử dụng lịch hẹn hò này. Không chỉ tùy chọn cuối tuần mà còn có một số tùy chọn khác trong ví dụ này. Dành thời gian của bạn và chọn một trong những bạn muốn
Thông tin / Tải xuống Bản trình diễn
Datepicker y Vật chất hóa
Tác giả của thiết kế này đã sử dụng lịch phù hợp để giúp bạn dễ dàng chọn ngày. Điều hướng được thực hiện cực kỳ đơn giản để bạn có thể chuyển đến bất kỳ tháng và năm nào chỉ bằng một cú nhấp chuột. Thiết kế kiểu chia đôi màn hình được sử dụng trong lịch này để người dùng có thể nhìn rõ ngày ở phía bên trái. Điều duy nhất bạn phải thay đổi trong lịch này là ngôn ngữ. Trong thiết kế mặc định, bạn nhận được Espanol, nhưng bạn có thể dễ dàng thay đổi nó sang ngôn ngữ bạn thích. Công cụ hẹn hò bootstrap này thích ứng với màn hình đến một giới hạn nhất định. Để làm cho nó phản hồi đầy đủ, bạn phải làm việc với nó theo cách thủ công
Thông tin / Tải xuống Bản trình diễn
Clean Vue Datepicker
Clean Vue datepicker là lịch datepicker theo phong cách vật liệu sạch sẽ. Nhà phát triển đã sử dụng các hiệu ứng hoạt hình nhỏ để hiển thị ngày bạn sẽ chọn. Hiệu ứng di chuột mượt mà và không làm mất nhiều thời gian của bạn. Trong bản demo, cùng một tông màu được sử dụng cho nền và lịch, điều này làm cho việc phân biệt lịch với nền trở nên khó khăn. Toàn bộ cấu trúc mã được sử dụng để tạo toàn bộ thiết kế này được chia sẻ với bạn trong trình chỉnh sửa CodePen. Do đó, bạn có thể dễ dàng chỉnh sửa mã và trực quan hóa kết quả trước khi sử dụng nó trên thiết kế của mình
Thông tin / Tải xuống Bản trình diễn
Lịch giao diện người dùng
UI Datepicker Calendar có thiết kế đầy màu sắc và hoạt hình. Ở đầu lịch, bạn có thể xem ngày hiện tại, đây là một bổ sung chu đáo. Xuyên suốt thiết kế, người sáng tạo đã sử dụng một yếu tố hình chữ nhật chunky. Chỉ có màu sắc được sử dụng để biểu thị ngày do bạn chọn, điều này không rõ ràng trên thiết kế lịch có vẻ ngoài táo bạo này. Bạn có thể sử dụng hiệu ứng di chuột hoặc hiệu ứng hoạt hình khác để biểu thị ngày do người dùng chọn. Hãy xem bộ sưu tập hiệu ứng di chuột của chúng tôi để có thêm cảm hứng. Thiết kế mặc định của thiết kế lịch hẹn hò này làm cho nó trở thành một lựa chọn hoàn hảo cho cả thiết kế phụ tùng và thành phần chính
Thông tin / Tải xuống Bản trình diễn
Lịch sự kiện
Lịch sự kiện là một thiết kế lịch được cân nhắc và thực hiện tốt. Mặc dù ban đầu nó là một thiết kế ứng dụng lịch, nhưng bạn có thể sử dụng nó làm thành phần bộ đếm ngày. Thiết kế điều hướng là phần tốt nhất của lịch này. Tháng, tuần và năm được coi là các yếu tố riêng biệt để người dùng có thể dễ dàng điều hướng đến ngày họ muốn. Ngoài thiết kế lịch, bạn còn có tùy chọn “thêm sự kiện” chức năng. Người sáng tạo đã sử dụng hiệu ứng phát sáng một cách thông minh để làm nổi bật các yếu tố quan trọng của trang web. Không chỉ thiết kế mà cấu trúc code cũng được xử lý chuyên nghiệp. Do đó, các nhà phát triển có thể sử dụng mã này một cách dễ dàng trong thiết kế của họ
Thông tin / Tải xuống Bản trình diễn
Khái niệm ứng dụng lịch
Ngay từ cái tên, bạn có thể hiểu rằng đây cũng là một thiết kế ứng dụng lịch. Hoạt hình linh hoạt và thiết kế giao diện tự nhiên làm cho nó trở thành một lựa chọn hoàn hảo cho lịch hẹn hò. Lịch này cho phép bạn chọn phạm vi ngày. Vì là ứng dụng di động nên việc cho phép người dùng chọn cả ngày nhận phòng và ngày trả phòng trên một màn hình sẽ là một thiết kế giao diện thông minh. Vì đây là một khái niệm ứng dụng lịch nên bạn có tùy chọn để thêm các tác vụ mới. Màu sắc được sử dụng thông minh để sắp xếp nội dung. Vì mẫu này sử dụng tập lệnh CSS3, nên bạn có thể sử dụng bất kỳ màu sắc hợp thời trang nào trong thiết kế này
Thông tin / Tải xuống Bản trình diễn
Lịch đáp ứng rộng
Nếu bạn không muốn bất kỳ khái niệm nào và chỉ cần lịch, ví dụ về trình ghi ngày tháng bootstrap này sẽ là một lựa chọn tốt. Lịch sạch đơn giản này có thể được sử dụng dưới mọi hình thức và trong mọi ứng dụng. Một ưu điểm khác của thiết kế đơn giản này là bạn có toàn quyền tự do thêm nét sáng tạo của riêng mình. Lịch có đầy đủ chức năng và bạn không thể chọn những ngày đã qua, đây là một thiết kế chu đáo. Mũi tên điều hướng được đưa ra ở trên cùng, nhưng trong thiết kế này, bạn chỉ có thể bỏ qua một tháng tại một thời điểm. Ngay từ cách phối màu cho đến hiệu ứng hoạt hình, mọi thứ đều được giữ ở mức tối thiểu để bạn có thể dễ dàng điều chỉnh lịch này trong thiết kế của mình
Thông tin / Tải xuống Bản trình diễn
Vật liệu góc
Angular Material Datepicker là một thiết kế gọn gàng cho các biểu mẫu và ứng dụng. Hai trường riêng biệt được cung cấp trong thiết kế bộ đếm ngày này để chọn từ và đến ngày. Lịch lớn với nhiều khoảng trống giữa mỗi thành phần. Màu sắc được sử dụng đẹp mắt để hiển thị ngày đã chọn. Ở đầu lịch, bạn có khoảng trống để hiển thị ngày đã chọn rõ ràng cho người dùng. Lịch có đầy đủ chức năng, thứ duy nhất không hoạt động là tùy chọn “Hôm nay”. Nhưng đó không phải là vấn đề lớn, bạn có thể thêm tính năng này bằng cách chỉnh sửa mã. Nhà phát triển chủ yếu sử dụng HTML5 và Angular JS để tạo thiết kế lịch hẹn hò thân thiện với người dùng này
Thông tin / Tải xuống Bản trình diễn
Sửa đổi UI Datepicker
Tác giả của ví dụ về công cụ hẹn hò bootstrap này đã sử dụng một cách tiếp cận khác. Lịch là trung tâm của thiết kế và ngày đã chọn được hiển thị trong hộp văn bản bên dưới lịch. Nếu bạn đang tạo một thiết kế lấy lịch làm trung tâm cho trang đăng ký hoặc đặt chỗ của mình, thì thiết kế này sẽ phù hợp. Tất cả những gì bạn phải làm là làm cho hộp văn bản lớn hơn vì hộp văn bản mặc định nhỏ hơn và nội dung trong đó không hiển thị rõ ràng. Vì nó là một khái niệm demo, nhà phát triển đã không biến nó thành thiết kế đáp ứng. Nhưng cơ sở mã được sử dụng trong thiết kế này có khả năng thích ứng với thiết kế đáp ứng. Nhìn chung, ví dụ về Sửa đổi bộ chọn ngày giao diện người dùng có thể được sử dụng trong thiết kế của bạn bằng cách thực hiện một số điều chỉnh đối với nó
Thông tin / Tải xuống Bản trình diễn
Bootstrap Datepicker
Tác giả của thiết kế này đã sử dụng thiết kế material design trong thiết kế lịch hẹn hò này. Một thiết kế theo kiểu chia đôi màn hình được theo sau trong lịch để hiển thị rõ ràng những gì đã chọn cho người dùng. Hiệu ứng đổ bóng và màu sắc được sử dụng thông minh để phân biệt từng yếu tố với những yếu tố khác. Bản thân phông chữ mặc định trông sạch sẽ và chuyên nghiệp, do đó bạn có thể sử dụng thiết kế này như vậy trong dự án của mình. Có một vài yếu tố chưa hoàn thành trong thiết kế này. Ví dụ: một lịch lớn ngay bên dưới hộp chọn ngày. Toàn bộ cấu trúc mã được chia sẻ trực tiếp với bạn trong trình chỉnh sửa CodePen. Vì vậy, bạn có thể dễ dàng làm bẩn tay và có thể tạo bộ đếm ngày tùy chỉnh của riêng mình ngay lập tức
Thông tin / Tải xuống Bản trình diễn
Lịch chỉ dành cho CSS
Lịch chỉ CSS này không hiển thị ngày đã chọn nhưng nó có thiết kế điều hướng lý tưởng cho lịch. Trong màn hình nhỏ, nhà thiết kế đã quản lý để cung cấp cho bạn một lịch phù hợp. Một mũi tên nhỏ được đưa ra ngay bên cạnh năm để bạn dễ dàng chọn năm bạn muốn. Vì là bản demo nên chỉ có một số năm giới hạn được đưa ra trong tùy chọn. Bằng cách giữ thiết kế này làm cơ sở, bạn có thể tạo lịch hẹn hò tùy chỉnh của riêng mình. Ngoài ra, thiết kế này hoàn toàn được tạo bằng tập lệnh CSS3, sử dụng mã này trong thiết kế của bạn sẽ không thành vấn đề
Thông tin / Tải xuống Bản trình diễn
Thiết kế Vật liệu – Bộ chọn
Ngay từ cái tên, bạn có thể hiểu rằng đây cũng là một ví dụ về công cụ hẹn hò dựa trên thiết kế material-design. Các hiệu ứng hoạt hình phóng to và thu nhỏ được sử dụng cho lịch, rất gọn gàng. Nhưng nếu bạn muốn sử dụng các loại hiệu ứng hoạt ảnh khác, hãy xem các ví dụ về hoạt ảnh CSS3 của chúng tôi. Đến với thiết kế lịch này, người sáng tạo đã sử dụng thiết kế material design một cách gọn gàng để mang đến cho bạn một bộ lịch lịch ngày trông thanh lịch. Thiết kế mặc định không phản hồi trên thiết bị di động, đây có thể là thứ bạn phải thao tác thủ công nếu chọn thiết kế này
Thông tin / Tải xuống Bản trình diễn
Bảng chọn ngày
Nhà phát triển Akash đã cung cấp cho chúng tôi lịch hẹn hò đầy màu sắc. Các hiệu ứng hoạt hình mượt mà và rõ ràng được sử dụng để làm cho lịch này có tính tương tác. Mặc dù thiết kế này sử dụng tập lệnh CSS3 mới nhất, bảng màu mặc định trông hơi buồn tẻ. Nhưng như thường lệ, bạn có thể sử dụng bảng màu của riêng mình trên lịch này. Nhà phát triển chủ yếu sử dụng CSS3 và Javascript để thực hiện thiết kế này. Toàn bộ cấu trúc mã được sử dụng để tạo thiết kế này được chia sẻ với bạn trong trình chỉnh sửa CodePen. Bạn có thể chỉnh sửa mã trong trình chỉnh sửa và có thể trực quan hóa mã trước khi sử dụng mã trên trang web hoặc ứng dụng của mình
Thông tin / Tải xuống Bản trình diễn
Vật liệu Datepicker
Trong ví dụ này, người sáng tạo đã cung cấp cho chúng ta một bộ đếm ngày thiết kế material design đầy màu sắc. Lịch ngày được làm to và gọn hơn giúp người dùng có thể nhìn rõ ngày mình chọn. Một lượng lớn không gian được cung cấp giữa mỗi phần tử để tương tác sẽ dễ dàng hơn trên công cụ chọn ngày này. Màu sắc tươi sáng và hiệu ứng hoạt hình nhanh được sử dụng để thu hút người dùng trực quan. Toàn bộ code script được chia sẻ với bạn trên CodePen editor. Bạn có thể thấy rằng người tạo đã đưa ra một mô tả rõ ràng và thông tin cho các mã. Nếu bạn là người mới bắt đầu, mẫu này sẽ giúp bạn hiểu mã tốt hơn
Thông tin / Tải xuống Bản trình diễn
Bộ đếm ngày thiết kế vật liệu giao diện người dùng jQuery
Đây là một ví dụ thiết kế datepicker thiết kế material design khác. Tuy nhiên, người sáng tạo đã sử dụng ít màu hơn để mang lại vẻ chuyên nghiệp cho bộ đếm ngày. Lịch được làm to và cao hơn để bạn có thể hiển thị rõ ràng tất cả các ngày trong tháng và ngày đã chọn ở trên cùng. Ở góc dưới cùng bên trái, bạn có tùy chọn để dễ dàng chuyển đến ngày hiện tại. Tất cả các tùy chọn và thành phần trong khái niệm bộ chọn ngày khởi động này đang hoạt động bình thường. Vì là mẫu concept nên có sự khác biệt nhỏ trong thiết kế. Nhưng không có gì là nghiêm trọng, bạn có thể sửa nó dễ dàng bằng cách chỉnh sửa một vài dòng mã
Thông tin / Tải xuống Bản trình diễn
Công cụ hẹn hò jQuery
jQuery Datepicker là một thiết kế datepicker bootstrap đơn giản và đầy đủ chức năng. Người tạo đã cung cấp tất cả các tùy chọn cơ bản trong lịch này, người dùng có thể dễ dàng điều hướng qua lịch và chọn ngày họ muốn. Cũng giống như thiết kế, tập lệnh mã cũng được giữ gọn gàng và đơn giản. Các nhà phát triển có thể dễ dàng làm việc với mẫu này và thêm các tính năng họ muốn. Trên lịch, ngày hiện tại được đánh dấu gọn gàng, nhưng bạn không có tùy chọn “hôm nay” để chuyển đến ngày hiện tại, giống như trong thiết kế bộ đếm ngày của Material đã đề cập ở trên. Nếu bạn đang tìm kiếm một thiết kế bootstrap datepicker đơn giản và dễ chỉnh sửa, ví dụ này sẽ gây ấn tượng với bạn
Thông tin / Tải xuống Bản trình diễn
công cụ hẹn hò trên iOS
Ngay từ cái tên, bạn có thể hiểu rằng nhà phát triển đã sử dụng lịch có thể cuộn theo phong cách iOS. Nếu bạn đang tìm kiếm một lịch tương tác cho ứng dụng di động hoặc đồng hồ thông minh của mình, thì thiết kế này có thể gây ấn tượng với bạn. Đồng hồ thông minh thời hiện đại có động cơ rung bên trong để đưa ra phản hồi xúc giác. Sử dụng các thiết kế lịch ngày tháng như thế này sẽ mang lại cảm giác hài lòng cho người dùng. Toàn bộ mã script được sử dụng để tạo thiết kế này được chia sẻ trực tiếp với bạn trên trình chỉnh sửa CodePen. Vì vậy, bạn có thể sử dụng mã dễ dàng trong thiết kế của mình. Ngoài ra, bạn có thể dễ dàng chỉnh sửa và trực quan hóa kết quả trên chính trình soạn thảo CodePen
Thông tin / Tải xuống Bản trình diễn
Bootstrap Datepicker Đa ngày
Đây là một công cụ hẹn hò duy nhất trong danh sách này. Người tạo đã cung cấp cho bạn đoạn mã để chọn nhiều ngày trong lịch. Ví dụ về công cụ hẹn hò bootstrap này chỉ cung cấp cho bạn chức năng, bạn không nhận được các thiết kế lạ mắt và các yếu tố đầy màu sắc. Bạn có thể lấy đoạn mã này và có thể thêm giao diện và hiệu ứng của riêng mình vào đó. Người tạo đã làm cho tập lệnh mã đủ linh hoạt để bạn dễ dàng chỉnh sửa và thêm các tính năng bạn muốn. Tất cả các chức năng cơ bản đều hoạt động trong thiết kế này, vì vậy bạn có thể tập trung vào việc tinh chỉnh thiết kế theo nhu cầu của mình