jQuery - set am/pm format using jQuery timepicker Plugin with example

Posted 8 years ago By Ajay Gupta 43886

In this tutorial, you will know how to use Timepicker with AM/PM dropdown using jQuery timepicker plugin.

jQuery timepicker is very lightweight timepicker plugin and you can easily use option given in timepicker method.

Passing option is not required with timepicker method is an optional parameters.

It's very easy to set up 12 hours time format with AM/PM using this timepicker plugin.

Following example will tell you how to use timepicker with am/pm dropdown option :

<html lang="en">
<head>
    <title>jQuery - set am/pm format using jQuery timepicker Plugin with example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
</head>
<body>
<div class="container">
    <strong>Select Time : </strong>  
     <input  class="form-control" type="text" placeholder="click to show timepicker"  id="example1">     
</div>
<script type="text/javascript">
     $(document).ready(function () {
        $('#example1').timepicker();   
     });
</script>
</body>
</html>

<html lang="en">
<head>

    <title>jQuery - set am/pm format using jQuery timepicker Plugin with example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>

</head>
<body>

<div class="container">
    <strong>Select Time : </strong>  
     <input  class="form-control" type="text" placeholder="click to show timepicker"  id="example1">     
</div>

<script type="text/javascript">
     $(document).ready(function () {
        $('#example1').timepicker();   
     });
</script>

</body>
</html>

Show Demo

jQuery - set am/pm format using jQuery timepicker Plugin with example

jQuery - set am/pm format using jQuery timepicker Plugin with example

Tags :

Related Posts

How to validate form in jQuery using jQuery Form Validator

Powerful jQuery Bootstrap Form Validation with Example

jQuery Select box search option with Chosen and Bootstrap Plugins example

Validate multiple email addresses in single input text example

How to create divided multi-scrolling pages using jQuery Plugins

jQuery How To Fix the “$ is not a function” Error Using noConflict

Add Remove input fields dynamically using jQuery

Auto Load More Data on Page Scroll with jQuery and PHP Laravel

jQuery making custom right-click context menu example

jQuery - disable context menu right click, cut, copy and paste

jQuery remove query string parameter from url

Check and Uncheck all checkbox using jQuery Example

How to hide, show, or toggle your div with jQuery

How to select only one checkbox at a time in jquery example

How to get current url with or without query string example jQuery

Submit PHP Bootstrap Form without Page Refresh using jQuery, Ajax

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

How to add or update query string parameter to current url in Javascript

Jquery Bootstrap Table Row Draggable Sortable and Resizable with Example

Bootstrap datepicker example text input with specifying date format

Bootstrap year picker example using datepicker js plugin

How to get client ip address in javascript of jquery?

How to count number of characters limit in textarea Javascript

jQuery Fullcalendar Integration with example

Loading Gravatar image from email using JQuery

Laravel 5 - Autocomplete Mutiple Fields Using jQuery, Ajax and MySQL

Ajax Image Upload using PHP and jQuery Example Without Page Refresh with Validation

How to get local time from UTC using Moment.JS with example