Allow passing an explicit format to datepicker

Refs #1919
Recompile assets
This commit is contained in:
Samuel Georges 2016-10-20 08:44:14 +11:00
parent 535dc78db1
commit 88196fb660
6 changed files with 65 additions and 33 deletions

View File

@ -560,8 +560,9 @@ class RelationController extends ControllerBehavior
/*
* No buttons, no search should mean no toolbar
*/
if (empty($toolbarConfig->search) && empty($toolbarConfig->buttons))
if (empty($toolbarConfig->search) && empty($toolbarConfig->buttons)) {
return;
}
$toolbarWidget = $this->makeWidget('Backend\Widgets\Toolbar', $toolbarConfig);
$toolbarWidget->cssClasses[] = 'list-header';

View File

@ -23,6 +23,11 @@ class DatePicker extends FormWidgetBase
*/
public $mode = 'datetime';
/**
* @var string Provide an explicit date display format.
*/
public $format = null;
/**
* @var string the minimum/earliest date that can be selected.
* eg: 2000-01-01
@ -85,8 +90,6 @@ class DatePicker extends FormWidgetBase
*/
public function prepareVars()
{
$this->vars['name'] = $this->formField->getName();
if ($value = $this->getLoadValue()) {
@ -95,25 +98,15 @@ class DatePicker extends FormWidgetBase
$value = $value instanceof Carbon ? $value->toDateTimeString() : $value;
}
/*
* Display alias, used by preview mode
*/
if ($this->mode == 'time') {
$formatAlias = 'time';
}
elseif ($this->mode == 'date') {
$formatAlias = 'dateLong';
}
else {
$formatAlias = 'dateTimeLong';
}
$this->vars['formatAlias'] = $formatAlias;
$this->vars['name'] = $this->formField->getName();
$this->vars['value'] = $value ?: '';
$this->vars['field'] = $this->formField;
$this->vars['mode'] = $this->mode;
$this->vars['minDate'] = $this->minDate;
$this->vars['maxDate'] = $this->maxDate;
$this->vars['format'] = $this->format;
$this->vars['formatMoment'] = $this->getDateFormatMoment();
$this->vars['formatAlias'] = $this->getDateFormatAlias();
}
/**
@ -131,4 +124,34 @@ class DatePicker extends FormWidgetBase
return $value;
}
/**
* Convert PHP format to JS format
*/
protected function getDateFormatMoment()
{
if ($this->format) {
return DateTimeHelper::momentFormat($this->format);
}
}
/*
* Display alias, used by preview mode
*/
protected function getDateFormatAlias()
{
if ($this->format) {
return null;
}
if ($this->mode == 'time') {
return 'time';
}
elseif ($this->mode == 'date') {
return 'dateLong';
}
else {
return 'dateTimeLong';
}
}
}

View File

@ -1,7 +1,8 @@
<?php if ($this->previewMode): ?>
<div class="form-control"><?= Backend::dateTime($value, [
'defaultValue' => $value,
'formatAlias' => $formatAlias
'format' => $format,
'formatAlias' => $formatAlias,
'defaultValue' => $value
]) ?></div>
<?php else: ?>
@ -9,6 +10,7 @@
id="<?= $this->getId() ?>"
class="field-datepicker"
data-control="datepicker"
<?php if ($formatMoment): ?>data-format="<?= $formatMoment ?>"<?php endif ?>
<?php if ($minDate): ?>data-min-date="<?= $minDate ?>"<?php endif ?>
<?php if ($maxDate): ?>data-max-date="<?= $maxDate ?>"<?php endif ?>
>

View File

@ -5,5 +5,5 @@ if ($.oc === undefined) $.oc = {}
if ($.oc.langMessages === undefined) $.oc.langMessages = {}
$.oc.langMessages['nb-no'] = $.extend(
$.oc.langMessages['nb-no'] || {},
{"markdowneditor":{"formatting":"Formatting","quote":"Quote","code":"Code","header1":"Header 1","header2":"Header 2","header3":"Header 3","header4":"Header 4","header5":"Header 5","header6":"Header 6","bold":"Bold","italic":"Italic","unorderedlist":"Unordered List","orderedlist":"Ordered List","video":"Video","image":"Image","link":"Link","horizontalrule":"Insert Horizontal Rule","fullscreen":"Full screen","preview":"Preview"},"mediamanager":{"insert_link":"Insert Media Link","insert_image":"Insert Media Image","insert_video":"Insert Media Video","insert_audio":"Insert Media Audio","invalid_file_empty_insert":"Please select file to insert a links to.","invalid_file_single_insert":"Please select a single file.","invalid_image_empty_insert":"Please select image(s) to insert.","invalid_video_empty_insert":"Please select a video file to insert.","invalid_audio_empty_insert":"Please select an audio file to insert."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Cancel","widget_remove_confirm":"Remove this widget?"},"datepicker":{"previousMonth":"Previous Month","nextMonth":"Next Month","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]},"filter":{"group":{"all":"all"},"dates":{"all":"all","filter_button_text":"Filter","reset_button_text":"Reset","date_placeholder":"Date","after_placeholder":"After","before_placeholder":"Before"}},"eventlog":{"show_stacktrace":"Show the stacktrace","hide_stacktrace":"Hide the stacktrace","tabs":{"formatted":"Formatted","raw":"Raw"},"editor":{"title":"Source code editor","description":"Your operating system should be configured to listen to one of these URL schemes.","openWith":"Open with","remember_choice":"Remember selected option for this session","open":"Open","cancel":"Cancel"}}}
{"markdowneditor":{"formatting":"Formatering","quote":"Sitat","code":"Kode","header1":"Overskrift 1","header2":"Overskrift 2","header3":"Overskrift 3","header4":"Overskrift 4","header5":"Overskrift 5","header6":"Overskrift 6","bold":"Fet","italic":"Kursiv","unorderedlist":"Punktliste","orderedlist":"Nummerert liste","video":"Video","image":"Bilde","link":"Lenke","horizontalrule":"Sett inn horisontal linje","fullscreen":"Fullskjerm","preview":"Forh\u00e5ndsvisning"},"mediamanager":{"insert_link":"Sett inn Media lenke","insert_image":"Sett inn Media bilde","insert_video":"Sett inn Media video","insert_audio":"Sett inn Media lyd","invalid_file_empty_insert":"Velg fil \u00e5 sette lenken inn i.","invalid_file_single_insert":"Vennligst velg \u00e9n enkelt fil.","invalid_image_empty_insert":"Velg bilde(r) \u00e5 sette inn.","invalid_video_empty_insert":"Velg en video \u00e5 sette inn.","invalid_audio_empty_insert":"Velg lyd \u00e5 sette inn."},"alert":{"confirm_button_text":"OK","cancel_button_text":"Avbryt","widget_remove_confirm":"Fjerne widget?"},"datepicker":{"previousMonth":"Forrige m\u00e5ned","nextMonth":"Neste m\u00e5ned","months":["januar","februar","mars","april","mai","juni","july","august","september","oktober","november","desember"],"weekdays":["s\u00f8ndag","mandag","tirsdag","onsdag","torsdag","fredag","l\u00f8rdag"],"weekdaysShort":["s\u00f8n","man","tir","ons","tor","fre","l\u00f8r"]},"filter":{"group":{"all":"alle"},"dates":{"all":"alle","filter_button_text":"Filter","reset_button_text":"Tilbakestill","date_placeholder":"Dato","after_placeholder":"Etter","before_placeholder":"F\u00f8r"}},"eventlog":{"show_stacktrace":"Vis stacktrace","hide_stacktrace":"Skjul stacktrace","tabs":{"formatted":"Formattert","raw":"Raw"},"editor":{"title":"Kildekodeeditor","description":"Ditt operativsystem b\u00f8r v\u00e6re konfigurert for \u00e5 \u00e5pne ett av disse URL-schemaene.","openWith":"\u00c5pne med","remember_choice":"Husk valget for denne sesjonen","open":"\u00c5pne","cancel":"Avbryt"}}}
);

View File

@ -95,12 +95,14 @@
//
DatePicker.prototype.initDatePicker = function() {
var self = this
var self = this,
dateFormat = this.getDateFormat(),
now = moment().tz(this.timezone).format(dateFormat)
var pikadayOptions = {
yearRange: this.options.yearRange,
format: this.getDateFormat(),
setDefaultDate: moment().tz(this.timezone).format('l'), // now
format: dateFormat,
setDefaultDate: now,
onOpen: function() {
var $field = $(this._o.trigger)
@ -119,7 +121,7 @@
pikadayOptions.i18n = lang
}
this.$datePicker.val(this.getDataLockerValue('l'))
this.$datePicker.val(this.getDataLockerValue(dateFormat))
if (this.options.minDate) {
pikadayOptions.minDate = new Date(this.options.minDate)
@ -160,9 +162,12 @@
}
DatePicker.prototype.getDateFormat = function() {
var format = this.options.format
var format = 'YYYY-MM-DD'
if (this.locale) {
if (this.options.format) {
format = this.options.format
}
else if (this.locale) {
format = moment()
.locale(this.locale)
.localeData()
@ -298,7 +303,7 @@
DatePicker.DEFAULTS = {
minDate: null,
maxDate: null,
format: 'YYYY-MM-DD',
format: null,
yearRange: 10
}

View File

@ -2773,12 +2773,12 @@ this.$el.removeData('oc.datePicker')
this.$el=null
this.options=null
BaseProto.dispose.call(this)}
DatePicker.prototype.initDatePicker=function(){var self=this
var pikadayOptions={yearRange:this.options.yearRange,format:this.getDateFormat(),setDefaultDate:moment().tz(this.timezone).format('l'),onOpen:function(){var $field=$(this._o.trigger)
DatePicker.prototype.initDatePicker=function(){var self=this,dateFormat=this.getDateFormat(),now=moment().tz(this.timezone).format(dateFormat)
var pikadayOptions={yearRange:this.options.yearRange,format:dateFormat,setDefaultDate:now,onOpen:function(){var $field=$(this._o.trigger)
$(this.el).css({left:'auto',right:$(window).width()-$field.offset().left-$field.outerWidth()})},onSelect:function(){self.onSelectDatePicker.call(self,this.getMoment())}}
var lang=this.getLang('datepicker',false)
if(lang){pikadayOptions.i18n=lang}
this.$datePicker.val(this.getDataLockerValue('l'))
this.$datePicker.val(this.getDataLockerValue(dateFormat))
if(this.options.minDate){pikadayOptions.minDate=new Date(this.options.minDate)}
if(this.options.maxDate){pikadayOptions.maxDate=new Date(this.options.maxDate)}
this.$datePicker.pikaday(pikadayOptions)}
@ -2790,8 +2790,9 @@ this.$dataLocker.val(lockerValue)}
DatePicker.prototype.getDatePickerValue=function(){var value=this.$datePicker.val()
if(!this.hasDate||!value){return moment.tz(this.appTimezone).tz(this.timezone).format(this.dbDateFormat)}
return moment(value,this.getDateFormat()).format(this.dbDateFormat)}
DatePicker.prototype.getDateFormat=function(){var format=this.options.format
if(this.locale){format=moment().locale(this.locale).localeData().longDateFormat('l')}
DatePicker.prototype.getDateFormat=function(){var format='YYYY-MM-DD'
if(this.options.format){format=this.options.format}
else if(this.locale){format=moment().locale(this.locale).localeData().longDateFormat('l')}
return format}
DatePicker.prototype.initTimePicker=function(){this.$timePicker.clockpicker({autoclose:'true',placement:'bottom',align:'right',twelvehour:this.isTimeTwelveHour()})
this.$timePicker.val(this.getDataLockerValue(this.getTimeFormat()))}
@ -2822,7 +2823,7 @@ if(!this.appTimezone){this.appTimezone='UTC'}
if(!this.timezone){this.timezone='UTC'}}
DatePicker.prototype.getLang=function(name,defaultValue){if($.oc===undefined||$.oc.lang===undefined){return defaultValue}
return $.oc.lang.get(name,defaultValue)}
DatePicker.DEFAULTS={minDate:null,maxDate:null,format:'YYYY-MM-DD',yearRange:10}
DatePicker.DEFAULTS={minDate:null,maxDate:null,format:null,yearRange:10}
var old=$.fn.datePicker
$.fn.datePicker=function(option){var args=Array.prototype.slice.call(arguments,1),items,result
items=this.each(function(){var $this=$(this)