Permalink
Browse files

ENHANCEMENT Using jQuery UI datepicker in CalendarDateField

API CHANGE Removed javascript datepicker functionality in DMYCalendarDateField

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@92512 467b73ca-7a2a-4603-9d3b-597d59a354a9
  • Loading branch information...
1 parent e233b4b commit b1baa84efb81cb71632c4b2c434bfe7154c27e0d @chillu chillu committed Nov 21, 2009
Showing with 66 additions and 35 deletions.
  1. +46 −27 forms/CalendarDateField.php
  2. +0 −8 forms/DMYCalendarDateField.php
  3. +20 −0 javascript/CalendarDateField.js
@@ -5,45 +5,64 @@
* @subpackage fields-datetime
*/
class CalendarDateField extends DateField {
- protected $futureOnly;
-
- static function HTMLField( $id, $name, $val ) {
- return <<<HTML
- <input type="text" id="$id" name="$name" value="$val" />
- <img src="sapphire/images/calendar-icon.gif" id="$id-icon" alt="Calendar icon" />
- <div class="calendarpopup" id="$id-calendar"></div>
-HTML;
- }
+ protected $futureOnly;
+
function Field() {
- Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/prototype.js');
- Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js");
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar.js");
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/lang/calendar-en.js");
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar-setup.js");
- Requirements::css(SAPPHIRE_DIR . "/css/CalendarDateField.css");
- Requirements::css(THIRDPARTY_DIR . "/calendar/calendar-win2k-1.css");
-
- $id = $this->id();
- $val = $this->attrValue();
+ // javascript: core
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery/jquery.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.core.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.datepicker.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-metadata/jquery.metadata.js');
- $futureClass = $this->futureOnly ? ' futureonly' : '';
+ // javascript: localized datepicker
+ // Include
+ $candidates = array(
+ i18n::convert_rfc1766(i18n::get_locale()),
+ i18n::get_lang_from_locale(i18n::get_locale())
+ );
+ foreach($candidates as $candidate) {
+ $datePickerI18nPath = sprintf(SAPPHIRE_DIR . '/thirdparty/jquery-ui/i18n/ui.datepicker-%s.js', $candidate);
+ if(Director::fileExists($datePickerI18nPath)) Requirements::javascript($datePickerI18nPath);
+ }
- $innerHTML = self::HTMLField( $id, $this->name, $val );
- return <<<HTML
- <div class="calendardate$futureClass">
- $innerHTML
- </div>
-HTML;
+ // javascript: concrete
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.class.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.specifity.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.selector.matches.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.dat.js');
+ Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-concrete/jquery.concrete.js');
+
+ // javascript: custom
+ Requirements::javascript(SAPPHIRE_DIR . '/javascript/CalendarDateField.js');
+
+ // css: core
+ Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/ui.all.css');
+
+ // clientside config
+ // TODO Abstract this into FormField to make generic configuration interface
+ $jsConfig = Convert::raw2json(array(
+ 'minDate' => $this->futureOnly ? SSDatetime::now()->format('m/d/Y') : null
+ ));
+
+ $this->addExtraClass($jsConfig);
+
+ return parent::Field();
}
/**
- * Sets the field so that only future dates can be set on them
+ * Sets the field so that only future dates can be set on them.
+ * Only applies for JavaScript value, no server-side validation.
+ *
+ * @deprecated 2.4
*/
function futureDateOnly() {
$this->futureOnly = true;
}
+
}
?>
@@ -11,14 +11,6 @@
class DMYCalendarDateField extends CalendarDateField {
function Field() {
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar.js");
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/lang/calendar-en.js");
- Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar-setup.js");
- Requirements::css(SAPPHIRE_DIR . "/css/CalendarDateField.css");
- Requirements::css(THIRDPARTY_DIR . "/calendar/calendar-win2k-1.css");
- Requirements::javascript(SAPPHIRE_DIR . "/javascript/NumericField.js");
- Requirements::javascript(SAPPHIRE_DIR . "/javascript/CalendarDateField.js");
-
$field = DateField::Field();
$id = $this->id();
@@ -0,0 +1,20 @@
+(function($) {
+ /**
+ * Formats a <input type="text"> field with a jQuery UI datepicker.
+ *
+ * Requires: concrete, ui.datepicker, jquery.metadata
+ *
+ * @author Ingo Schommer, SilverStripe Ltd.
+ */
+ $('.calendardate').concrete('ss', {
+ onmatch: function() {
+ this.find('input').each(function() {
+ var conf = $(this).metadata();
+ if(conf.minDate) conf.minDate = new Date(Date.parse(conf.minDate));
+
+ //
+ $(this).datepicker(conf);
+ });
+ }
+ })
+}(jQuery));

0 comments on commit b1baa84

Please sign in to comment.