Date and Time Picker Field - Version 2.0.6

Version Description

  • Changed how the Date and Time Picker field is triggered when ACF adds a new Date and Time Picker field to the DOM
  • Saves the Date and Time Picker field as an UNIX timestamp to MySQL. Use the PHP date function when you use it in your theme.
Download this release

Release Info

Developer PerS
Plugin Icon 128x128 Date and Time Picker Field
Version 2.0.6
Comparing to
See all releases

Code changes from version 2.0.5 to 2.0.6

Files changed (5) hide show
  1. acf-date_time_picker.php +1 -1
  2. date_time_picker-v3.php +83 -1
  3. date_time_picker-v4.php +86 -32
  4. js/timepicker.js +53 -21
  5. readme.txt +14 -1
acf-date_time_picker.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Advanced Custom Fields: date_time_picker
4
  Plugin URI: https://github.com/soderlind/acf-field-date-time-picker
5
  Description: Date and Time Picker field for Advanced Custom Fields
6
- Version: 2.0.5
7
  Author: Per Soderlind
8
  Author URI: http://soderlind.no
9
  License: GPLv2 or later
3
  Plugin Name: Advanced Custom Fields: date_time_picker
4
  Plugin URI: https://github.com/soderlind/acf-field-date-time-picker
5
  Description: Date and Time Picker field for Advanced Custom Fields
6
+ Version: 2.0.6
7
  Author: Per Soderlind
8
  Author URI: http://soderlind.no
9
  License: GPLv2 or later
date_time_picker-v3.php CHANGED
@@ -40,7 +40,7 @@ class acf_field_date_time_picker extends acf_Field {
40
  $this->settings = array(
41
  'path' => $this->helpers_get_path( __FILE__ )
42
  , 'dir' => $this->helpers_get_dir( __FILE__ )
43
- , 'version' => '2.0.5'
44
  );
45
  }
46
 
@@ -237,6 +237,88 @@ class acf_field_date_time_picker extends acf_Field {
237
  }
238
 
239
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
240
  /*--------------------------------------------------------------------------------------
241
  *
242
  * admin_print_scripts / admin_print_styles
40
  $this->settings = array(
41
  'path' => $this->helpers_get_path( __FILE__ )
42
  , 'dir' => $this->helpers_get_dir( __FILE__ )
43
+ , 'version' => '2.0.6'
44
  );
45
  }
46
 
237
  }
238
 
239
 
240
+ /*--------------------------------------------------------------------------------------
241
+ *
242
+ * update_value
243
+ * - this function is called when saving a post object that your field is assigned to.
244
+ * the function will pass through the 3 parameters for you to use.
245
+ *
246
+ * @params
247
+ * - $post_id (int) - usefull if you need to save extra data or manipulate the current
248
+ * post object
249
+ * - $field (array) - usefull if you need to manipulate the $value based on a field option
250
+ * - $value (mixed) - the new value of your field.
251
+ *
252
+ * @author Elliot Condon
253
+ * @since 2.2.0
254
+ *
255
+ *-------------------------------------------------------------------------------------*/
256
+
257
+ function update_value($post_id, $field, $value) {
258
+ $value = ($value != '') ? strtotime($value) : '';
259
+ parent::update_value($post_id, $field, $value);
260
+ }
261
+
262
+
263
+ /*--------------------------------------------------------------------------------------
264
+ *
265
+ * get_value
266
+ * - called from the edit page to get the value of your field. This function is useful
267
+ * if your field needs to collect extra data for your create_field() function.
268
+ *
269
+ * @params
270
+ * - $post_id (int) - the post ID which your value is attached to
271
+ * - $field (array) - the field object.
272
+ *
273
+ * @author Elliot Condon
274
+ * @since 2.2.0
275
+ *
276
+ *-------------------------------------------------------------------------------------*/
277
+
278
+ function get_value($post_id, $field){
279
+ $value = parent::get_value($post_id, $field);
280
+
281
+ if ($value != '') {
282
+ if ( $field['show_date'] == 'true') {
283
+ $value = date(sprintf("%s %s",$this->js_to_php_dateformat($field['date_format']),$this->js_to_php_timeformat($field['time_format'])), $value);
284
+ } else {
285
+ $value = date(sprintf("%s",$this->js_to_php_timeformat($field['time_format'])), $value);
286
+ }
287
+ }
288
+
289
+ return $value;
290
+ }
291
+
292
+ function js_to_php_dateformat($date_format) {
293
+ $chars = array(
294
+ // Day
295
+ 'dd' => 'd', 'd' => 'j', 'DD' => 'l', 'o' => 'z',
296
+ // Month
297
+ 'mm' => 'm', 'm' => 'n', 'MM' => 'F', 'M' => 'M',
298
+ // Year
299
+ 'yy' => 'Y', 'y' => 'y',
300
+ );
301
+
302
+ return strtr((string)$date_format, $chars);
303
+ }
304
+
305
+
306
+ function js_to_php_timeformat($time_format) {
307
+
308
+ $chars = array(
309
+ //hour
310
+ 'HH' => 'H', 'H' => 'G', 'hh' => 'h' , 'h' => 'g',
311
+ //minute
312
+ 'mm' => 'i', 'm' => 'i',
313
+ //second
314
+ 'ss' => 's', 's' => 's',
315
+ //am/pm
316
+ 'TT' => 'A', 'T' => 'A', 'tt' => 'a', 't' => 'a'
317
+ );
318
+
319
+ return strtr((string)$time_format, $chars);
320
+ }
321
+
322
  /*--------------------------------------------------------------------------------------
323
  *
324
  * admin_print_scripts / admin_print_styles
date_time_picker-v4.php CHANGED
@@ -45,7 +45,7 @@ class acf_field_date_time_picker extends acf_field
45
  $this->settings = array(
46
  'path' => apply_filters('acf/helpers/get_path', __FILE__)
47
  , 'dir' => apply_filters('acf/helpers/get_dir', __FILE__)
48
- , 'version' => '2.0.5'
49
  );
50
 
51
  }
@@ -155,36 +155,8 @@ class acf_field_date_time_picker extends acf_field
155
  ) );
156
  ?>
157
  </td>
158
- </tr>
159
- <?php /* ?>
160
- <tr class="field_option field_option_<?php echo $this->name; ?> timepicker_week_number">
161
- <td class="label">
162
- <label for=""><?php _e( "Time Picker language?", $this->domain ); ?></label>
163
- </td>
164
- <td>
165
- <?php
166
- $dir_path = $this->settings['path'] . 'js/localization/';
167
- $exclude_list = array(".", "..");
168
- $languages = preg_filter("/jquery-ui-timepicker-(.*?)\.js/","$1",array_diff(scandir($dir_path), $exclude_list));
169
- $locales["en"] = "en";
170
- foreach ($languages as $k => $v) {
171
- $locales[$v] = $v;
172
- }
173
- asort($locales);
174
- $locales["unknown"] = 'Use: "lang/' . $this->domain . '-' . get_locale() . '.mo"';
175
-
176
- do_action('acf/create_field', array(
177
- 'type' => 'select'
178
- , 'name' => 'fields['.$key.'][language]'
179
- , 'value' => $field['language']
180
- , 'choices' => $locales
181
- ) );
182
- ?>
183
- </td>
184
  </tr>
185
- <?php */?>
186
  <?php
187
-
188
  }
189
 
190
 
@@ -206,12 +178,92 @@ class acf_field_date_time_picker extends acf_field
206
  extract( $field, EXTR_SKIP ); //Declare each item in $field as its own variable i.e.: $name, $value, $label, $time_format, $date_format and $show_week_number
207
 
208
  if ( $show_date != 'true' ) {
209
- echo '<input type="text" name="' . $name . '" class="time_picker" value="' . $value . '" data-picker="' . $picker . '" data-time_format="' . $time_format . '" title="' . $label . '" />';
210
  } else {
211
- echo '<input type="text" name="' . $name . '" class="time_picker" value="' . $value . '" data-picker="' . $picker . '" data-date_format="' . $date_format . '" data-time_format="' . $time_format . '" data-show_week_number="' . $show_week_number . '" title="' . $label . '" />';
212
  }
213
  }
214
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
 
216
 
217
 
@@ -284,7 +336,9 @@ class acf_field_date_time_picker extends acf_field
284
  $l10n = ( isset( $timepicker_locale ) ) ? array_merge( $timepicker_wp_locale, $timepicker_locale ) : $timepicker_wp_locale;
285
  wp_localize_script( 'timepicker', 'timepicker_objectL10n', $l10n );
286
 
287
- wp_enqueue_style('jquery-style', $this->settings['dir'] . 'css/jquery-ui.css');
 
 
288
  wp_enqueue_style('timepicker', $this->settings['dir'] . 'css/jquery-ui-timepicker-addon.css',array(
289
  'jquery-style'
290
  ),$this->settings['version']);
45
  $this->settings = array(
46
  'path' => apply_filters('acf/helpers/get_path', __FILE__)
47
  , 'dir' => apply_filters('acf/helpers/get_dir', __FILE__)
48
+ , 'version' => '2.0.6'
49
  );
50
 
51
  }
155
  ) );
156
  ?>
157
  </td>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </tr>
 
159
  <?php
 
160
  }
161
 
162
 
178
  extract( $field, EXTR_SKIP ); //Declare each item in $field as its own variable i.e.: $name, $value, $label, $time_format, $date_format and $show_week_number
179
 
180
  if ( $show_date != 'true' ) {
181
+ echo '<input type="text" value="' . $value . '" name="' . $name . '" class="ps_timepicker" value="" data-picker="' . $picker . '" data-time_format="' . $time_format . '" title="' . $label . '" />';
182
  } else {
183
+ echo '<input type="text" value="' . $value . '" name="' . $name . '" class="ps_timepicker" value="" data-picker="' . $picker . '" data-date_format="' . $date_format . '" data-time_format="' . $time_format . '" data-show_week_number="' . $show_week_number . '" title="' . $label . '" />';
184
  }
185
  }
186
 
187
+ /*
188
+ * load_value()
189
+ *
190
+ * This filter is appied to the $value after it is loaded from the db
191
+ *
192
+ * @type filter
193
+ * @since 3.6
194
+ * @date 23/01/13
195
+ *
196
+ * @param $value - the value found in the database
197
+ * @param $post_id - the $post_id from which the value was loaded from
198
+ * @param $field - the field array holding all the field options
199
+ *
200
+ * @return $value - the value to be saved in te database
201
+ */
202
+
203
+ function load_value( $value, $post_id, $field ) {
204
+ if ($value != '') {
205
+ if ( $field['show_date'] == 'true') {
206
+ $value = date(sprintf("%s %s",$this->js_to_php_dateformat($field['date_format']),$this->js_to_php_timeformat($field['time_format'])), $value);
207
+ } else {
208
+ $value = date(sprintf("%s",$this->js_to_php_timeformat($field['time_format'])), $value);
209
+ }
210
+ }
211
+ return $value;
212
+ }
213
+
214
+
215
+ function js_to_php_dateformat($date_format) {
216
+ $chars = array(
217
+ // Day
218
+ 'dd' => 'd', 'd' => 'j', 'DD' => 'l', 'o' => 'z',
219
+ // Month
220
+ 'mm' => 'm', 'm' => 'n', 'MM' => 'F', 'M' => 'M',
221
+ // Year
222
+ 'yy' => 'Y', 'y' => 'y',
223
+ );
224
+
225
+ return strtr((string)$date_format, $chars);
226
+ }
227
+
228
+
229
+ function js_to_php_timeformat($time_format) {
230
+
231
+ $chars = array(
232
+ //hour
233
+ 'HH' => 'H', 'H' => 'G', 'hh' => 'h' , 'h' => 'g',
234
+ //minute
235
+ 'mm' => 'i', 'm' => 'i',
236
+ //second
237
+ 'ss' => 's', 's' => 's',
238
+ //am/pm
239
+ 'TT' => 'A', 'T' => 'A', 'tt' => 'a', 't' => 'a'
240
+ );
241
+
242
+ return strtr((string)$time_format, $chars);
243
+ }
244
+
245
+
246
+ /*
247
+ * update_value()
248
+ *
249
+ * This filter is appied to the $value before it is updated in the db
250
+ *
251
+ * @type filter
252
+ * @since 3.6
253
+ * @date 23/01/13
254
+ *
255
+ * @param $value - the value which will be saved in the database
256
+ * @param $post_id - the $post_id of which the value will be saved
257
+ * @param $field - the field array holding all the field options
258
+ *
259
+ * @return $value - the modified value
260
+ */
261
+
262
+ function update_value( $value, $post_id, $field ) {
263
+
264
+ $value = ($value != '') ? strtotime($value) : '';
265
+ return $value;
266
+ }
267
 
268
 
269
 
336
  $l10n = ( isset( $timepicker_locale ) ) ? array_merge( $timepicker_wp_locale, $timepicker_locale ) : $timepicker_wp_locale;
337
  wp_localize_script( 'timepicker', 'timepicker_objectL10n', $l10n );
338
 
339
+ wp_enqueue_style('jquery-style', $this->settings['dir'] . 'css/jquery-ui.css',array(
340
+ 'acf-datepicker'
341
+ ),$this->settings['version']);
342
  wp_enqueue_style('timepicker', $this->settings['dir'] . 'css/jquery-ui-timepicker-addon.css',array(
343
  'jquery-style'
344
  ),$this->settings['version']);
js/timepicker.js CHANGED
@@ -1,23 +1,55 @@
1
- /*
2
- Attach a jQuery.datetimepicker() to "input[type=text].time_picker" fields. Will also attach to dynamic added fields.
3
- */
4
- jQuery(function() {
5
- jQuery(".field").on("focusin", "input[type=text].time_picker", function(){
6
- self = jQuery(this);
7
- self.datetimepicker({
8
- timeOnly: (self.attr('data-date_format') == undefined),
9
- timeFormat: self.attr('data-time_format'),
10
- dateFormat: (self.attr('data-date_format') != undefined) ? self.attr('data-date_format') : 'mm/dd/yy',
11
- showWeek: (self.attr('data-show_week_number') != "true") ? 0 : 1,
12
- ampm: (self.attr('data-time_format').search(/t/i) != -1),
13
- controlType: self.attr('data-picker'),
14
- timeOnlyTitle: self.attr('title'),
15
- monthNames: timepicker_objectL10n.monthNames,
16
- monthNamesShort: timepicker_objectL10n.monthNamesShort,
17
- dayNames: timepicker_objectL10n.dayNames,
18
- dayNamesShort: timepicker_objectL10n.dayNamesShort,
19
- dayNamesMin: timepicker_objectL10n.dayNamesMin,
20
- firstDay: timepicker_objectL10n.firstDay
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  });
22
  });
23
- });
1
+ /**
2
+ * Date and Time Picker
3
+ */
4
+ (function($){
5
+ $(document).live('acf/setup_fields', function(e, postbox){
6
+ $(postbox).find('input.ps_timepicker').each(function(){
7
+ var input = $(this)
8
+ , is_timeonly = (input.attr('data-date_format') == undefined)
9
+ , date_format = (input.attr('data-date_format') != undefined) ? input.attr('data-date_format') : 'mm/dd/yy'
10
+ , time_format = input.attr('data-time_format')
11
+ , has_ampm = (input.attr('data-time_format').search(/t/i) != -1);
12
+
13
+ if( acf.helpers.is_clone_field(input) )
14
+ {
15
+ return;
16
+ }
17
+
18
+
19
+ input.addClass('active').datetimepicker({
20
+ changeYear: true
21
+ , yearRange: "-100:+100"
22
+ , changeMonth: true
23
+ , timeOnly: is_timeonly
24
+ , timeFormat: time_format
25
+ , dateFormat: date_format
26
+ , showWeek: (input.attr('data-show_week_number') != "true") ? 0 : 1
27
+ , ampm: has_ampm
28
+ , controlType: input.attr('data-picker')
29
+ , timeOnlyTitle: input.attr('title')
30
+ , monthNames: timepicker_objectL10n.monthNames
31
+ , monthNamesShort: timepicker_objectL10n.monthNamesShort
32
+ , dayNames: timepicker_objectL10n.dayNames
33
+ , dayNamesShort: timepicker_objectL10n.dayNamesShort
34
+ , dayNamesMin: timepicker_objectL10n.dayNamesMin
35
+ , firstDay: timepicker_objectL10n.firstDay
36
+ });
37
+
38
+
39
+ if($('body > #ui-datepicker-div').length > 0)
40
+ {
41
+ $('#ui-datepicker-div').wrap('<div class="ui-acf" />');
42
+ }
43
+
44
+ // allow null
45
+ input.blur(function(){
46
+
47
+ if( !input.val() )
48
+ {
49
+ input.val('');
50
+ }
51
+ });
52
+
53
  });
54
  });
55
+ })(jQuery);
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: http://soderlind.no/donate/
4
  Tags: acf, custom field,datepicker,timepicker
5
  Requires at least: 3.4
6
  Tested up to: 3.5.1
7
- Stable tag: 2.0.5
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -12,6 +12,8 @@ Date and Time Picker field for Advanced Custom Fields
12
 
13
  == Description ==
14
 
 
 
15
  This is an add-on for the [Advanced Custom Fields](http://wordpress.org/extend/plugins/advanced-custom-fields/) WordPress plugin, that allows you to add a Date and Time Picker field type.
16
 
17
  [youtube http://www.youtube.com/watch?v=Mumx4HGOljQ]
@@ -97,13 +99,24 @@ tt am or pm for AM/PM
97
  TT AM or PM for AM/PM
98
  `
99
 
 
100
  = Examples =
101
 
102
  * `yy-mm-dd`: 2013-04-12
103
  * `HH:mm`: 24 hour clock, with a leading 0 for hour and minute
104
  * `h:m tt`: 12 hour clock with am/pm, no leading 0
105
 
 
 
 
 
106
  == Changelog ==
 
 
 
 
 
 
107
  = 2.0.5 =
108
  * When enqueuing JavaScripts, replaced dependecy of jquery-ui-datepicker with acf-datepicker
109
  = 2.0.4 =
4
  Tags: acf, custom field,datepicker,timepicker
5
  Requires at least: 3.4
6
  Tested up to: 3.5.1
7
+ Stable tag: 2.0.6
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
12
 
13
  == Description ==
14
 
15
+ = NOTE! 2.0.6 HAS A BUG, ON SITES USING PREVIOUS VERSION THE UPGRADE WILL RESET THE DATE AND TIME. 2.0.7 WILL SOON BE AVAILABLE =
16
+
17
  This is an add-on for the [Advanced Custom Fields](http://wordpress.org/extend/plugins/advanced-custom-fields/) WordPress plugin, that allows you to add a Date and Time Picker field type.
18
 
19
  [youtube http://www.youtube.com/watch?v=Mumx4HGOljQ]
99
  TT AM or PM for AM/PM
100
  `
101
 
102
+
103
  = Examples =
104
 
105
  * `yy-mm-dd`: 2013-04-12
106
  * `HH:mm`: 24 hour clock, with a leading 0 for hour and minute
107
  * `h:m tt`: 12 hour clock with am/pm, no leading 0
108
 
109
+ **How do I format the date and time when I want to use it in my theme?**
110
+
111
+ The Date and Time Picker field is saved as an UNIX timestamp. Use the PHP [date](http://php.net/manual/en/function.date.php) function when you use it in your theme.
112
+
113
  == Changelog ==
114
+
115
+ = NOTE! 2.0.6 HAS A BUG, ON SITES USING PREVIOUS VERSIONS THE UPGRADE WILL RESET THE DATE AND TIME. 2.0.7 WILL SOON BE AVAILABLE =
116
+
117
+ = 2.0.6 =
118
+ * Changed how the Date and Time Picker field is triggered when ACF adds a new Date and Time Picker field to the DOM
119
+ * Saves the Date and Time Picker field as an UNIX timestamp to MySQL. Use the PHP [date](http://php.net/manual/en/function.date.php) function when you use it in your theme.
120
  = 2.0.5 =
121
  * When enqueuing JavaScripts, replaced dependecy of jquery-ui-datepicker with acf-datepicker
122
  = 2.0.4 =