Simple Date and Time Picker with jQuery – jsRapDateTimePicker

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

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

Demo Download

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
    }
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.