Simple Date and Time Picker with jQuery – jsRapDateTimePicker

A lightweight, simple and easy to use jQuery plugin for Date and Time Picker based on HTML select element. Through this plugin, you can pick / select year, month, day, hour, minute and second individually.

Plugin Overview

Plugin: jsRapDateTimePicker
Author: Thibor
Licence: MIT Licence
Published: April 4, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 4.8 KB

How to Use Simple Date and Time Picker :

1. Load the jQuery and plugin’s CSS and JavaScript file into 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>

2. Create a div element with a unique id in which you want to show date and time picker.

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

3. Now, initialize the plugin with that div in jQuery document ready function.

$(document).ready(function(){

$('#dateTimePicker').jsRapDateTimePicker();

});

4. To add custom captions for year, month, day and so on.

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

5.Callback custom function on change date & time.

$('#dateTimePicker').jsRapDateTimePicker({
   onChange: function(){
      //code to execute
    }
});