Add datepicker widget to date fields

Resolves #56
xwp · Feb 3, 2014 · 1e86e7a · 1e86e7a
1 parent 11cf9fb
commit 1e86e7a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/includes/form.php b/includes/form.php
@@ -64,6 +64,8 @@ public function enqueue_scripts( $hook ) {
 			wp_enqueue_style( 'select2' );
 			wp_enqueue_script( 'select2' );
 			wp_enqueue_script( 'underscore' );
+			wp_enqueue_script( 'jquery-ui-datepicker' );
+			wp_enqueue_style( 'jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css', array(), '1.10.3' );
 			wp_enqueue_script( 'stream-notifications-form', WP_STREAM_NOTIFICATIONS_URL . '/ui/js/form.js', array( 'underscore', 'select2' ) );
 			wp_localize_script( 'stream-notifications-form', 'stream_notifications', $this->get_js_options() );
 		}

diff --git a/ui/js/form.js b/ui/js/form.js
@@ -4,6 +4,10 @@ jQuery(function($){
 
 	_.templateSettings.variable = 'vars';
 
+	$.datepicker.setDefaults({
+		dateFormat: "yy-mm-dd"
+	});
+
 	var types = stream_notifications.types,
 		i,
 
@@ -42,6 +46,12 @@ jQuery(function($){
 			formatResult: select2_format
 		},
 
+		datify = function( elements ) {
+			$( elements ).each( function() {
+				$(this).datepicker();
+			});
+		},
+
 		selectify = function( elements, args ) {
 			args = args || {};
 			$.extend( args, select2_args );
@@ -191,6 +201,7 @@ jQuery(function($){
 			$this.after( tmpl_options( $.extend( options, { index: index } ) ) );
 			selectify( $this.parent().find('select') );
 			selectify( $this.parent().find('input.tags, input.ajax'), { tags: [] } );
+			datify( $this.parent().find('.type-date') );
 		})
 	;
 

diff --git a/views/rule-form.php b/views/rule-form.php
@@ -116,7 +116,7 @@
 			<% } %>
 		</select>
 		<% } else { %>
-		<input type="text" name="triggers[<%- vars.index %>][value]" class="trigger-value <% if ( vars.tags ){ %>tags<% } %> <% if ( vars.ajax ){ %>ajax<% } %>">
+		<input type="text" name="triggers[<%- vars.index %>][value]" class="trigger-value type-<%- vars.type %> <% if ( vars.tags ){ %>tags<% } %> <% if ( vars.ajax ){ %>ajax<% } %>">
 		<% } // endif%>
 	</div>
 </div>