mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
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:
parent
e233b4b76b
commit
b1baa84efb
@ -5,45 +5,64 @@
|
|||||||
* @subpackage fields-datetime
|
* @subpackage fields-datetime
|
||||||
*/
|
*/
|
||||||
class CalendarDateField extends DateField {
|
class CalendarDateField extends DateField {
|
||||||
|
|
||||||
protected $futureOnly;
|
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() {
|
function Field() {
|
||||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/prototype/prototype.js');
|
// javascript: core
|
||||||
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js");
|
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery/jquery.js');
|
||||||
Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar.js");
|
Requirements::javascript(SAPPHIRE_DIR . '/javascript/jquery_improvements.js');
|
||||||
Requirements::javascript(THIRDPARTY_DIR . "/calendar/lang/calendar-en.js");
|
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.core.js');
|
||||||
Requirements::javascript(THIRDPARTY_DIR . "/calendar/calendar-setup.js");
|
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-ui/ui.datepicker.js');
|
||||||
Requirements::css(SAPPHIRE_DIR . "/css/CalendarDateField.css");
|
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-metadata/jquery.metadata.js');
|
||||||
Requirements::css(THIRDPARTY_DIR . "/calendar/calendar-win2k-1.css");
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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');
|
||||||
|
|
||||||
$id = $this->id();
|
// css: core
|
||||||
$val = $this->attrValue();
|
Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/ui.all.css');
|
||||||
|
|
||||||
$futureClass = $this->futureOnly ? ' futureonly' : '';
|
// 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);
|
||||||
|
|
||||||
$innerHTML = self::HTMLField( $id, $this->name, $val );
|
return parent::Field();
|
||||||
|
|
||||||
return <<<HTML
|
|
||||||
<div class="calendardate$futureClass">
|
|
||||||
$innerHTML
|
|
||||||
</div>
|
|
||||||
HTML;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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() {
|
function futureDateOnly() {
|
||||||
$this->futureOnly = true;
|
$this->futureOnly = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
?>
|
?>
|
@ -11,14 +11,6 @@
|
|||||||
class DMYCalendarDateField extends CalendarDateField {
|
class DMYCalendarDateField extends CalendarDateField {
|
||||||
|
|
||||||
function Field() {
|
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();
|
$field = DateField::Field();
|
||||||
|
|
||||||
$id = $this->id();
|
$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));
|
Loading…
x
Reference in New Issue
Block a user