Using jquery date-time picker

It's very easy to use jquery date-timer picker in webpages. Here is a very simple way on how to do this. I'm going to create a html file that will demonstrate this

so, first of all, create a html file and give it a name. In the header section of the html file, add the following link

<link rel="stylesheet" href="jquery-ui-1.8.6.custom.css" type="text/css">

Download this css file from here and put it in the current directory.

Create a folder in the current directory and give it name 'images'. Download this file and put it in the images folder.

Now, add the following css code in the header

<style type="text/css">
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
</style>


Now, download these three files from here and put them in the current directory
jquery-1.4.4.min.js
jquery-ui-1.8.6.custom.min.js
jquery-ui-timepicker-addon.js

Now, we have to add these file in the html file. To do this, we have to write the following code in the header section.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>


Our header section is finished. close it with </head> tag

In the body section we have to create input fields and call javascript function to use the date-time picker. We can use only datepicker, only timepicker or both. Below is a simple code that shows how to do this

<input name="example1" id="example1" value="" type="text">
<script type="text/javascript">
$('#example1').datepicker({
minDate: new Date(),
dateFormat:'dd/mm/yy'
});
</script>


<input id="example2" name="example2" type="text">
<script type="text/javascript">
$('#example2').timepicker({
hourGrid: 4,
minuteGrid: 10,
ampm:true
});
</script>


<input id="example3" name="example2" type="text">
<script type="text/javascript">
$('#example3').datetimepicker();
</script>

This is very basic demonstration. We can do customize them. To see the various options that can be used visit here

Now, click on the input field. It should work!

Comments

Post a Comment

Popular posts from this blog

Run tasks in background in Spring

Why background task? There are tons of examples where we often need to run a task in background e.g. sending an email, sms or notification, writing some log in file etc. If a task is not required to maintain atomicity and can be executed after some delay, it's a good candidate to run in background.   How to run tasks in background in Java? In Java, the easiest way to run a task in background is to create a new thread and execute it. It's quite simple. Here is how to do this: new Thread(new Runnable(){ @Override public void run(){ // your background task } }).start(); It's easy! But there are some maintenance problem with the above code. The major problem is - there is no way to control how many background tasks we want to run simultaneously. For example, if 1000 users registers in your application at a time and you create 1000 background threads to send them a confirmation email, maybe you'll be in trouble. So you ne
Read more

Conditional field inclusion in Jackson and Spring Boot

When we write JSON API with spring boot, we often need to customize which fields should be included in our response JSON and which should not. For example, suppose we've a Model like the following: public class User {     private Long id;     private String name;     private String password;     private List<String> children;     // getters and setters here } Now we've the following controller: @RestController @RequestMapping("/api/users") public class UserController {     @GetMapping     public List<User> userList(){         User user = new User();         user.setId(10L);         user.setName("Rafiqunnabi Nayan");         user.setPassword("abcd");         user.setChildren(Arrays.asList("Child 1", "Child 2"));         return Arrays.asList(user);     }     @GetMapping("{id}")     public User userDetails(@PathVariable Long id){         User user = new User();         user.set
Read more

How to configure Wildfly 10 to use MySQL

Follow these steps to configure MySQL in Wildfly 10 Step 1 : Download MySQL connector jar from mysql downloads page . Step 2 : Go to modules\system\layers\base\com of your Wildfly home Step 3 : Create folder like mysql\main and go to mysql\main Step 4 : Place the downloaded connector jar in the main folder  Step 5 : Create a file named module.xml in the main folder and put the following content in it. Set the path variable so that it matches the name of the jar file. <?xml version="1.0" encoding="UTF-8"?> <module xmlns="urn:jboss:module:1.1" name="com.mysql">     <resources>         <resource-root path="mysql-connector-java-5.1.39-bin.jar"/>                  </resources>     <dependencies>         <module name="javax.api"/>         <module name="javax.transaction.api"/>     </dependencies> </module> Step 6 : Go to standalone\configuration dir
Read more