jQuery Simple Date Time Picker

January 04, 2020 No comments jQuery Plugin Date TIme Picker

1. Introduction

jsRapDateTimePicker is a super simple jQuery plugin allows users to pick a date and time from Year, Month, Day, Hour, Minute, Second dropdown select elements.

Jquery simple date time picker in selectboxes

2. Plugin Overview

Library jsRapDateTimePicker
Author Thibor
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version

Demo

3. How to install and use jsRapDateTimePicker jQuery plugin

Follow the below steps to install jsRapDateTimePicker jQuery plugin on your website.

3.1. Load the jQuery library and jsRapDateTimePicker js and css files into your HTML document:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Date Picker CSS -->
<link rel="stylesheet" href="jsRapDateTimePicker.css" />

<!-- Date Picker Js -->
<script src="jsRapDateTimePicker.js"></script>

3.2. Create DIV element with unique id:

<div id="dateTimePicker"></div>

3.2. Initialize the plugin:

$(document).ready(function(){
    $('#dateTimePicker').jsRapDateTimePicker();
});

After initialization, the plugin will create six dropdowns for a year, month, day, hour, minute and second selection.

Additionally we can provide a different labels:

3.3. Initialize the plugin with custom captions for year, month, day:

$('#dateTimePicker').jsRapDateTimePicker({
   captions:['Year','Month','Day','Hour','Minute',''],
});

and attach the callback function that will run after value change:

3.4. Initialize the plugin with callback function:

$('#dateTimePicker').jsRapDateTimePicker({
   onChange: function(){
     // do something 
   }
});

4. Conclusion

In this article, we presented jsRapDateTimePicker jQuery plugin that can be used as a date/time picker component on HTML forms. The plugin uses the jQuery framework and is very easy to integrate on the websites or apps.

{{ message }}

{{ 'Comments are closed.' | trans }}