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
This commit is contained in:
Ingo Schommer 2009-11-21 02:30:31 +00:00
parent e233b4b76b
commit b1baa84efb
3 changed files with 66 additions and 35 deletions

View File

@ -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;
}
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");
// 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');
$id = $this->id();
$val = $this->attrValue();
// 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);
}
$futureClass = $this->futureOnly ? ' futureonly' : '';
$innerHTML = self::HTMLField( $id, $this->name, $val );
// 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');
return <<<HTML
<div class="calendardate$futureClass">
$innerHTML
</div>
HTML;
// 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;
}
}
?>

View File

@ -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();

View File

@ -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));