jQuery Duration Picker

Email
Time duration selector in jQuery. For easily selecting time periods in web forms.
Rating: Not Rated Yet
Price:
Base price with tax: $10.00
Sales price: $9.00
Download
Description

jQuery Duration Picker v1.0

Time duration selector in jQuery. For easily selecting time periods in web forms.
Currently supports Hours:Minutes:Seconds but I will consider adding Years, Months, Weeks, and/or Days by demand.

Working Example: -

Please select a duration (H:M:S)
 

Code Example: -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="/durationPicker.js"></script>

<strong>Please select a duration (H:M:S)</strong>
<div id="FormFieldName"></div>
<script>jQuery(document).ready(function(){durationPicker.init('FormFieldName', 3600);});</script>

<button onclick="durationPicker.set('FormFieldName', 12245); return false;">Set to 12245 Seconds</button>
<button onclick="durationPicker.setHms('FormFieldName', 3, 4, 15); return false;">Set to 3hrs 4mins, 15secs</button>
<button onclick="alert('Total seconds: '+durationPicker.get('FormFieldName')); return false;">Get total duration in seconds</button><br />
<button onclick="alert('Hour(s): '+durationPicker.getHms('FormFieldName').hrs); return false;">Get hours only</button>
<button onclick="alert('Minute(s): '+durationPicker.getHms('FormFieldName').mins); return false;">Get minutes only</button>
<button onclick="alert('Second(s): '+durationPicker.getHms('FormFieldName').secs); return false;">Get seconds only</button>
<button onclick="durationPicker.set('FormFieldName', 0); return false;">Zero</button>

Function Reference

  • init(id, secs)
  • tally(id)
  • hmsToSecs(h, m, s)
  • secsToHms(seconds)
  • set(id, seconds)
  • setHms(id, h, m, s)
  • get(id)
  • getHms(id)

Have fun,
Eugene Kerner

eKerner.com · technical developer
eKerner Home | eKerner Shop

Downloadable Product
If you have purchased this product then you will need to login to reveal your download link.

Reviews

There are yet no reviews for this product.

Receive Product Updates

Logged in members may subscribe to receive product updates. LOGIN

Select Currency

Display Products on Your Website !..

VM API !MULTI! v1.1 by ekerner.com

Displays Virtuemart Products, Categories, and Manufacturers via remote requests like cURL, AJAX, etc.
Using this component and the methods documented below anyone can easily display and promote the products listed in this online store on any website that they have administrative access to.
Simply copy and paste the below code samples into your websites HTML pages, its that easy!.

Features ...

  • Support Virtuemart Products, Categories, and Manufacturers.
  • Works for any GET request like cURL, AJAX, file_get_contents(), etc.
  • Responses in HTML or JSON.
  • Products by category, popularity, featured, latest, random, recent.
  • Product limits configurable.
  • HTML layouts adjustable by products per row.
  • JSON returns links to details pages and related media.
  • Includes a Joomla module enabling site administrators to publish this information to any position.

Products API ...

Products Request Fields ...

  • option: com_vm_api (required).
  • view: products (required).
  • group: featured|latest|popular|random|recent (default: random).
  • vendor: [int] - a vendor id (default: 0 meaning all).
  • cat: [int] - a category id (default: 0 meaning all).
  • type: html|json (default: html).
  • cols: [int] - only applies if 'type' is 'html' (default: 2).
  • max: [int] (default: 0 meaning all).
  • lang: [string] - a language code like 'en-GB' (default: [site language]).
  • price: [bool] - display prices (default: 1).

The below are live examples using the Products API installed on this site.

Both examples get 4 random products ...

HTML Products API

Get 4 random products in HTML format, 2 per row ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=products&group=random&type=html&cols=2&max=4

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_random_products">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'products',
		group: 'random',
		type: 'html',
		cols: 2,
		max: 4
	},
	dataType: 'html',
	success: function(data){
		jQuery('#vm_random_products').html(data);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

JSON Products API

Get 4 random products in JSON format ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=products&group=random&type=json&max=4

FIELDS RETURNED: virtuemart_vendor_id, virtuemart_product_id, slug, product_sku, product_name, product_s_desc, product_desc, product_url, product_in_stock, product_availability, product_special, customtitle, metadesc, metakey, metarobot, metaauthor, product_box, product_price, product_override_price, virtuemart_category_id, category_name, virtuemart_manufacturer_id, mf_name, mf_url, mf_email, mf_desc, canonical, link, file_url_thumb, file_url, product_tax, product_discount, product_currency

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_random_products_json">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'products',
		group: 'random',
		type: 'json',
		max: 4
	},
	dataType: 'json',
	success: function(data){
		var products = 'JSON contains details for: -<ul>';
		for (var i in data) 
			if (data[i].product_name)
				products += '<li><b>'+data[i].product_name+': </b>'+
						data[i].product_s_desc+'</li>';
		products += '</ul>';
		jQuery('#vm_random_products_json').html(products);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

Categories API ...

Categories Request Fields ...

  • option: com_vm_api (required).
  • view: categories (required).
  • cat: [int] - parent category id (default: 0 meaning all).
  • type: html|json (default: html).
  • lang: [string] - a language code like 'en-GB' (default: [site language]).
  • vendor: [int] - the vendor id (default: 1).

The below are live examples using the Categories API installed on this site.

Both examples get all categories ...

HTML Categories API

Get all categories in HTML format ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=categories&type=html

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_categories">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'categories',
		type: 'html'
	},
	dataType: 'html',
	success: function(data){
		jQuery('#vm_categories').html(data);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

JSON Categories API

Get all categories in JSON format ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=categories&type=json

FIELDS RETURNED: virtuemart_category_id, slug, category_name, category_description, category_url, customtitle, metadesc, metakey, media_url, media_url_thumb, children

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_categories_json">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'categories',
		type: 'json'
	},
	dataType: 'json',
	success: function(data){
		var categories = 'JSON contains details for: -<ul>';
		for (var i in data) 
			if (data[i].category_name)
				categories += '<li><b>'+data[i].category_name+': </b>'+
						data[i].category_description+'</li>';
		categories += '</ul>';
		jQuery('#vm_categories_json').html(categories);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

Manufacturers API ...

Manufacturers Request Fields ...

  • option: com_vm_api (required).
  • view: manufacturers (required).
  • max: [int] - (default: 0 meaning all).
  • cols: [int] - only applies if type is html (default: 2).
  • show: image|text|all - only applies if type is html (default: all).
  • type: html|json (default: html).
  • lang: [string] - a language code like 'en-GB' (default: [site language]).

The below are live examples using the Manufacturers API installed on this site.

Both examples get maximum 4 manufacturers ...

HTML Manufacturers API

Get max 4 manufacturers in HTML format, 2 per row ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=manufacturers&type=html&cols=2&max=4

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_manufacturers">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'manufacturers',
		type: 'html',
		cols: 2,
		max: 4
	},
	dataType: 'html',
	success: function(data){
		jQuery('#vm_manufacturers').html(data);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

JSON Manufacturers API

Get max 4 manufacturers in JSON format ...

URL: http://shop.ekerner.com/index.php?option=com_vm_api&view=manufacturers&type=json&max=4

FIELDS RETURNED: virtuemart_manufacturer_id, slug, mf_name, mf_desc, mf_email, mf_url, mf_website, media_url, media_url_thumb, mf_category_name

CODE: (Copy and paste this into any webpage): -

						
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="vm_manufacturers_json">Loading ...</div>
<script type="text/javascript">
//<![CDATA[
jQuery.ajax({
	url: 'http://shop.ekerner.com/index.php',
	data: {
		option: 'com_vm_api',
		view: 'manufacturers',
		type: 'json'
	},
	dataType: 'json',
	success: function(data){
		var manufacturers = 'JSON contains details for: -<ul>';
		for (var i in data) 
			if (data[i].mf_name)
				manufacturers += '<li><b>'+data[i].mf_name+': </b>'+
						data[i].mf_desc+'</li>';
		manufacturers += '</ul>';
		jQuery('#vm_manufacturers_json').html(manufacturers);
	}
});
//]]>
</script>
					

OUTPUT: -

Loading ...

Notes ...

  • Your web pages may already have the jQuery lib included in which case you may be able to omit the following line from the code sniplets ...
    						
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    					
  • The HTML code examples may be used as they are however the JSON code examples should be edited first to better express the HTML including the links etc.
    The JSON APIs are designed to give developers greater control over how the elements are rendered and therefore much more related information is returned than by the HTML API calls (See the "FIELDS RETURNED" headings).
    You are welcome to hire my dev team to help you with your custom designs if so desired.
Have fun,
Eugene Kerner.

Copyright © 2017 eKerner.com

eKerner Logo

Contact Us

Call us at:
+61 415 607 770

Email us at:
shop@ekerner.com

Leave us feedback:
Feedback Form

Message Us:
Enquiry Form

facebook

twitter

rss