DatePicker Plugin for CFWheels

Use a jQuery UI datePicker widget in your CFWheels forms

datePicker and datePickerTag functions accept the same arguments as CFWheels textField and textFieldTag functions respectively, but they also accept all options for the jQuery datePicker widget

Following the road to DatePicker Glory

1. Install the DatePicker plugin from CFWheels or GitHub
2. Make sure you have setup jQuery AND jQuery UI in your app (consider my JQuack plugin)
3. Use the datePicker() and datePickerTag() form helpers

Examples

<!--- Use with objects --->
#datePicker(label="Birthday", objectName="user", property="birthday")#

<!--- Use without objects --->
#datePickerTag(label="Birthday", name="birthday", value=Now())#

Note: All jQuery specific arguments (jQuery datePicker options) are case-sensitive

Advertisements

JQuack for jQuery CFWheels Plugin

Manage and call your jQuery core files, plugin packages, UI and themes with a set of JQuack functions. Download it here..

It also adds a simple UI for configuring all your core and plugins
This plugin adds a set of functions to call your jQuery core files, plugin packages, UI and themes. You can can also call files from an external library (Eg: Google CDN).

There is also my standalone CFC for use outside of CFWheels (but why would you want to do that?)

Contributions
Feel free to contribute via GitHub or drop me an email.. I have also written a bunch of unit tests if you’re into that sort of thing, they’re all available on GitHub.

Credits
Tony Petruzzi for his many replies to all things CFWheels, plugins and unit testing
CFWheels and jQuery for all-round awesomeness
JQuack Roadmap
Better support for external file requests
Support for non minified versions of UI files
File verification tool
Unit test improvements

Function Syntax
JQuackCore([coreFileName, rootURL, head])
JQuackPlugin([key, file, pluginRootURL, delimiter, head])
JQuackUI([UIBundleName, themeName, rootURL, delimiter, head])
JQuackTheme(themeName, [UIBundleName, rootURL, head])
JQuackAll([delimiter, head])

Recommended Usage Example

<!--- 1. include all files as defined in your JQuack configuration --->
#JQuackAll()#

<!--- 2. include minimal files --->
#JQuackCore()#
#JQuackPlugin("foo,bar")#
#JQuackUI()#

<!--- 3. include a combination of files --->
#JQuackCore()#
#JQuackPlugin("foo,bar")#
#JQuackPlugin(file="jquery.foo.js", pluginRootURL="http://www.foobar.com/plugins/")#
#JQuackUI(themeName="barfoo")#
JQuackCore()
Usage Example
<!--- JQuackCore() Examples --->
<!--- call the core file as defined in config --->
#JQuackCore()#

<!--- write the output to the head area of the HTML page --->
#JQuackCore(head=true)#

<!--- call a different version of the core file from your javascripts/jquery/ folder --->
#JQuackCore(coreFileName="jquery-1.5.0.min.js")#

<!--- call from Google Libraries API --->
#JQuackCore(coreFileName="jquery.min.js", rootURL="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/")#
JQuackPlugin()
Usage Example
<!--- JQuackPlugin() Examples --->
<!--- call a single plugin package --->
#JQuackPlugin("foo")#

<!--- call multiple plugin packages --->
#JQuackPlugin("foo,bar,quack")#

<!--- don't worry, none of the 'foo' files will be included more than once --->
#JQuackPlugin("foo,bar")#
#JQuackPlugin("foo")#

<!--- write the output to the head area of the HTML page --->
#JQuackPlugin(key="foo,bar", head=true)#

<!--- call all plugins --->
#JQuackPlugin()#

<!--- remove line breaks between included files --->
#JQuackPlugin(delimiter="")#

<!--- call a plugin package from another location --->
#JQuackPlugin(key="foo", pluginRootURL="http://someserver.com/js/plugins/")#
#JQuackPlugin(key="bar", pluginRootURL="/javascripts/someotherfolder/")#

<!--- call a file not defined in your packages but located in the /javascripts/jquery/plugins/ folder --->
#JQuackPlugin(file="jquery.foobar.js")#

<!--- call a file from another location --->
#JQuackPlugin(file="jquery.foobar.js", pluginRootURL="http://someserver.com/js/plugins/")#
JQuackUI()
Usage Example
<!--- JQuackUI() Examples --->
<!--- call the UI bundle as defined in config --->
#JQuackUI()#

<!--- include the UI with a different theme --->
#JQuackUI(themeName="rainy")#

<!--- include a different UI bundle --->
#JQuackUI(UIBundleName="jquery-ui-1.2.34.custom")#

<!--- write the output to the head area of the HTML page --->
#JQuackUI(head=true)#
JQuackTheme()
NOTE: This function is called within JQuackUI(), so should only be used to override the theme used in JQuackUI()

Usage Example
<!--- JQuackTheme() Examples --->

<!--- include a different theme --->
#JQuackTheme(themeName="wacky")#

<!--- write the output to the head area of the HTML page --->
#JQuackTheme(themeName="wacky", head=true)#
JQuackAll()
Usage Example
<!--- JQuackAll() Examples --->
<!--- include all files --->
#JQuackAll()#

<!--- include all files without line breaks --->
#JQuackAll(delimiter="")#

<!--- write all output to the head area of the HTML page --->
#JQuackAll(head=true)#

jQuack Coldfusion Component for jQuery

Update: JQuack is now a Coldfusion on Wheels plugin!

A CFC wrapper for including jQuery core files, plugins, UI components and themes. Explicitly including jQuery files is no big deal, but jQuack’s strength is being able to bundle a plugin’s core and any dependencies into a single function call with a single parameter (or no parameter at all!)

Is a dependency shared between plugins (e.g. bgiframe.js)? No problem, jQuack prevents files from being included more than once per request.

It makes application-wide or server-wide version changes simple.

Download it @ GitHub

Example Plugin Package Structure

<!--- Setup your plugin packages (structure of arrays) --->
<cfset pluginStruct = {} />
<cfset pluginStruct.foo = ["foo/foo.js","foo/foo.css"] />
<cfset pluginStruct.bar = ["bar/bar.css","bar/bar.js","bar/foobar.js","jquery.barfoo.js"] />
<cfset pluginStruct.CFJS = ["cfjs/jquery.cfjs.packed.js"] />

Example init params

<cfset initArgs = {} />
<!--- Name of the jQuery core file --->
<cfset initArgs.coreFileName = "jquery-6.6.6.min.js" />
<!--- URL Path to your javascript directory, defaults to /jquery/ --->
<cfset initArgs.rootPath = "/jquery/" />
<!--- Name of the jQuery UI bundle --->
<cfset initArgs.UIBundleName = "jquery-ui-1.0.0.custom" />
<!--- Name of the theme directory --->
<cfset initArgs.themeName = "sunny" />
<!--- 	URL Path to your plugins directory, defaults to /{rootPath}/plugins/ --->
<cfset initArgs.pluginPath = "/jquery/plugins/"	/>
<!---
A structure of arrays. Plugins will be reference by their structure key,
the array will contain URLs to the plugin files relative to the {pluginPath}
See Example pluginStruct above
--->
<cfset initArgs.pluginStruct = pluginStruct />
<!--- Intialising jQuack --->
<cfset jQuack = CreateObject("component","{your_cfc_path}.jQuack").init(argumentCollection=initArgs) />

Example Function Calls

<!--- Calling jQuack in your views --->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuack..</title>
		#jQuack.core()#
		#jQuack.plugin("foo,bar,cfjs")#
		#jQuack.ui()#

		<!--- a different core file --->
		#jQuack.core("jquery-6.6.6.min.js")#

		<!--- from an external URL --->
		#jQuack.core(coreFileName="jquery.min.js", rootPath="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/")#

		<!--- a single plugin --->
		#jQuack.plugin("foo")#

		<!--- multiple plugins --->
		#jQuack.plugin("foo,bar")#

		<!--- ALL plugins --->
		#jQuack.plugin()#

		<!--- a plugin not defined in the pluginStruct --->
		#jQuack.plugin(file="outbackjack/outbackjack.js")#

		<!--- a plugin from an external URL --->
		#jQuack.plugin(file="penelopepitstop.js", pluginPath="http://plugins.wackyraces.com/")#

		<!--- UI with a different theme --->
		#jQuack.ui(themeName="rainy")#
	</head>
	<body>...</body>
</html>

Example Directory Structure

Core File
/{yourWebRoot}/jquery/
/{yourWebRoot}/jquery/jquery-1.0.0.min.js

Plugins
/{yourWebRoot}/jquery/plugins/
/{yourWebRoot}/jquery/plugins/foo/
/{yourWebRoot}/jquery/plugins/foo/foo.js
/{yourWebRoot}/jquery/plugins/foo/foo.css
/{yourWebRoot}/jquery/plugins/bar/
/{yourWebRoot}/jquery/plugins/bar/bar.js
/{yourWebRoot}/jquery/plugins/bar/bar.css

UI & Themes
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/jquery-ui-1.0.0.custom.css

/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/jquery-ui-1.0.0.custom.css
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/js/jquery-ui-1.0.0.custom.min.js