multilingual time picker ui - Free Download Customizable Multilingual Time Picker For jQuery UI

Free Download Customizable Multilingual Time Picker For jQuery UI

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Multilingual Time Picker For jQuery UI, hope it will help you in programming stack.

multilingual time picker ui - Free Download Customizable Multilingual Time Picker For jQuery UI
File Size: 244 KB
Views Total: 1815
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A jQuery time picker plugin based on jQuery UI datepicker widget that allows the user to select times (in hours and minutes) from a dialog popup.

Features:

  • 17 languages.
  • Custom trigger element.
  • Supports jQuery animations: fade, slide, etc.
  • Shows AM/PM in the selected time.
  • Custom position of the time picker relative to the trigger element.
  • Hour or Minute picker only.
  • Allows you to set min/max times and intervals.
  • Optional Now/Deselect/Close buttons.

How to use it:

1. Include the necessary jQuery library and jQuery UI framework on the page.

view source
1 <link rel="stylesheet" href="/path/to/cdn/jquery-ui.css" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Include the jQuery UI Timepicker plugin’s JavaScript and CSS files.

view source
1 <link rel="stylesheet" href="./jquery.ui.timepicker.css" />
2 <script src="./jquery.ui.timepicker.js"></script>

3. Include a language file as per your needs. All possible languages:

  • Croatian/Bosnian (jquery.ui.timepicker.hr.js)
  • Czech (jquery.ui.timepicker-cs.js
  • German (Deutsch) (jquery.ui.timepicker-de.js)
  • Dutch (Nederlands) (jquery.ui.timepicker-nl.js)
  • Français (jquery.ui.timepicker-fr.js)
  • Hungarian (jquery.ui.timepicker-hu.js)
  • Italian (jquery.ui.timepicker-it.js)
  • Japanese (jquery.ui.timepicker-ja.js)
  • Macedonian (jquery.ui.timepicker-mk.js)
  • Polish (jquery.ui.timepicker-pl.js)
  • Portuguese/Brazilian (jquery.ui.timepicker-pt-BR.js)
  • Русский (jquery.ui.timepicker-ru.js)
  • Slovak (jquery.ui.timepicker-sk.js)
  • Slovenian (jquery.ui.timepicker-sl.js)
  • Swedish (jquery.ui.timepicker-sv.js)
  • Spanish (jquery.ui.timepicker-es.js)
  • Turkish (jquery.ui.timepicker-tr.js)
view source
01 <script src="i18n/jquery.ui.timepicker-cs.js"></script>
02 <script src="i18n/jquery.ui.timepicker-de.js"></script>
03 <script src="i18n/jquery.ui.timepicker-es.js"></script>
04 <script src="i18n/jquery.ui.timepicker-fr.js"></script>
05 <script src="i18n/jquery.ui.timepicker-hr.js"></script>
06 <script src="i18n/jquery.ui.timepicker-hu.js"></script>
07 <script src="i18n/jquery.ui.timepicker-it.js"></script>
08 <script src="i18n/jquery.ui.timepicker-ja.js"></script>
09 <script src="i18n/jquery.ui.timepicker-mk.js"></script>
10 <script src="i18n/jquery.ui.timepicker-nl.js"></script>
11 <script src="i18n/jquery.ui.timepicker-pl.js"></script>
12 <script src="i18n/jquery.ui.timepicker-pt-BR.js"></script>
13 <script src="i18n/jquery.ui.timepicker-ru.js"></script>
14 <script src="i18n/jquery.ui.timepicker-sk.js"></script>
15 <script src="i18n/jquery.ui.timepicker-sl.js"></script>
16 <script src="i18n/jquery.ui.timepicker-sv.js"></script>
17 <script src="i18n/jquery.ui.timepicker-tr.js"></script>

4. Attach the time picker to an input field.

view source
1 <input type="text" id="timepicker" value="01:30 PM" />
view source
1 <input type="text" id="timepicker" value="01:30 PM" />

5. Enable a trigger button to toggle the time picker.

view source
1 <input type="text" id="timepicker" value="01:30 PM" />
2 <button class="myButton">Toggle</button>
view source
1 $('#timepicker').timepicker({
2   showOn: 'button',
3   button: '.myButton'
4 });

6. Create an inline time picker widget and output the selected time using the onSelect function.

view source
1 <div id="timepicker"></div>
2 <p id="output"></p>
view source
1 $('#timepicker').timepicker({
2   onSelect: function(time, inst) {
3     $('#output').html('You selected ' + time);
4   }
5 });

7. Full plugin options to customize the time picker.

view source
01 $('#timepicker').timepicker({
02  
03   // or 'button'
04   showOn: 'focus',
05  
06   // 'button' element that will trigger the timepicker
07   button: null,                  
08  
09   // Name of jQuery animation for popup
10   showAnim: 'fadeIn',            
11  
12   // Options for enhanced animations
13   showOptions: {},        
14  
15   // Display text following the input box, e.g. showing the format      
16   appendText: '',                
17  
18   // The character to use to separate hours and minutes.
19   timeSeparator: ':',            
20  
21   // Accept time input without seperator.
22   timeWithoutSeparator: true,    
23  
24   // The character to use to separate the time from the time period.
25   periodSeparator: ' ',          
26  
27   // Define whether or not to show AM/PM with selected time
28   showPeriod: false,             
29  
30   // Show the AM/PM labels on the left of the time picker
31   showPeriodLabels: true,        
32  
33   // Define whether or not to show a leading zero for hours < 10. [true/false]
34   showLeadingZero: true,         
35  
36   // Define whether or not to show a leading zero for minutes < 10.
37   showMinutesLeadingZero: true,  
38  
39   // Selector for an

source : jquery.net

Related posts: