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: 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

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...