Hello friends!
As you all know, most websites today use datetimepicker . This is an indispensable part. From setting up interview schedules, setting up appointments or setting delivery, all need a calendar or say exactly our word is to use datetimepicker . However, selecting a datetimepicker to suit the requirements of sapo customers for the most convenient end-user use is not an easy problem. So this article will give you some simple and easy to use datetimepicker libraries.
1. Mobiscroll
This library is too famous for beautiful interface in iOS style, diverse, has many options for users. In addition, the library supports both AngularJS and ReactJs platforms.
Declare as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | mobiscroll.settings = { theme: 'ios', themeVariant: 'light', display: 'bubble' }; $(function () { var now = new Date(); $('#demo-datetime').mobiscroll().datetime({ dateWheels: '|D M d|', onInit: function (event, inst) { inst.setVal(now, true); } }); $('#demo-datetime-expanded').mobiscroll().datetime({ onInit: function (event, inst) { inst.setVal(now, true); } }); $('#demo-datetime-date').mobiscroll().date({ onInit: function (event, inst) { inst.setVal(now, true); } }); $('#demo-datetime-time').mobiscroll().time({ onInit: function (event, inst) { inst.setVal(now, true); } }); $('#demo-datetime-non-form').mobiscroll().datetime({ onInit: function (event, inst) { inst.setVal(now, true); } }); var instance = $('#demo-datetime-external').mobiscroll().datetime({ showOnTap: false, showOnFocus: false, onInit: function (event, inst) { inst.setVal(new Date(), true); } }).mobiscroll('getInst'); $('#show-demo-datetime-external').click(function () { instance.show(); return false; }); }); |
Reference link https://demo.mobiscroll.com/jquery/datetime/date-time-picker#
2. Flatpickr
flatpickr is a pretty light but also very powerful datetimepicker library.
Reference link: https://flatpickr.js.org/
3. DateTime Picker
This is a library that allows users to easily customize it. With a simple design, lightweight extremely suitable for applications on mobile.
Reference link: https://nehakadam.github.io/DateTimePicker/
4. Tiny Date Picker
This is also a fairly light and independent datetimepiker library.
Reference link: https://github.com/chrisdavies/tiny-date-picker
5. Continuous Calendar
This is a very special library, allowing users to choose the date by scolling to show other months of the year instead of pagination like other libraries.
Reference link: https://github.com/continuouscalendar/jquery-continuous-calendar
6. Date Range
This library is also quite familiar, allowing users to select a certain time period.
Reference link: https://github.com/longbill/jquery-date-range-picker
7. DateTimePicker
This library easily allows users to choose the date and time to add to their form. Customize options is also very simple.
Reference link: https://xdsoft.net/jqplugins/datetimepicker/
8. Material-datetime-picker
This library is quite familiar with developers already. Nice interface, eye-catching, easy to use. And can install the plugin as a module in ES6.
The example declaration is as follows:
1 2 3 4 5 6 7 8 9 10 | import MaterialDateTimePicker from 'material-datetime-picker'; const picker = new MaterialDateTimePicker() .on('submit', (val) => console.log(`data: ${val}`)) .on('open', () => console.log('opened')) .on('close', () => console.log('closed')); document.querySelector('.c-datepicker-btn') .on('click', () => picker.open()); |
Reference link: https://ripjar.github.io/material-datetime-picker/
9. UI Calendar
This library is specifically used for AngularJS platform. Lets add events to the calendar, extremely convenient.
Reference link: https://github.com/angular-ui/ui-calendar
10. React Infinite Calendar
If the UI Calendar library above is exclusively for AngularJS, this library is specialized for ReactJS. With the design of displaying the months of the year connected together instead of quite fancy paging will give users a new experience.
Reference link: https://github.com/clauderic/react-infinite-calendar
11. Monthly.js
This library has a fairly simple UI but it is extremely convenient. This library allows users to add events to the calendar. This is a very cool function that can make many developers quite headache.
Reference link: https://github.com/kthornbloom/Monthly
This article of mine may help you a bit in finding the most suitable datetimepiker library for you. Good luck!