editFormat docs and code

jquense · Apr 27, 2015 · 030c94b · 030c94b
1 parent 7115bbb
commit 030c94b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 23 deletions.
diff --git a/docs/components/demos/datepicker.jsx b/docs/components/demos/datepicker.jsx
@@ -5,6 +5,11 @@ var React = require('react')
   , ButtonGroup = require('../../bootstrap').ButtonGroup
   , RW = require('../../../src/index');
 
+require('globalize/lib/cultures/globalize.culture.en-GB');
+require('globalize/lib/cultures/globalize.culture.es');
+require('globalize/lib/cultures/globalize.culture.fr');
+require('globalize/lib/cultures/globalize.culture.ar-AE');
+
 module.exports = React.createClass({
   getInitialState: function(){
     return {
@@ -17,14 +22,17 @@ module.exports = React.createClass({
   render: function(){
     var props;
 
-    var format = this.state.time && this.state.calendar
+    let cultures = ['en', 'en-GB', 'es', 'fr', 'ar-AE'];
+
+    let format = this.state.time && this.state.calendar
       ? 'MM/dd/yyyy h:mm tt'
       : this.state.time ? 't' : 'd'
 
     props = {
       format: this.state.format,
       max: this.state.max || undefined,
       min: this.state.min || undefined,
+      culture: this.state.culture,
       calendar: this.state.calendar,
       time: this.state.time,
       finalView: this.state.finalView,
@@ -40,21 +48,33 @@ module.exports = React.createClass({
         <div className='row'>
           <div className='col-md-6 demo'>
             <div className='form-group'>
-              <RW.DateTimePicker {...props}/>
+              <RW.DateTimePicker defaultValue={new Date()} {...props}/>
             </div>
             <div className='form-group'>
               <label>Custom Rendering</label>
               <RW.DateTimePicker {...props} timeComponent={itemComp}/>
             </div>
           </div>
           <div className='col-md-6 api-panel'>
-            <div className='form-group'>
-              <label className='checkbox-inline'>
-                <input type='checkbox'
-                  checked={this.state.isRtl}
-                  onChange={this._set.bind(null, 'isRtl', !this.state.isRtl)}/>
-                  Right to Left
-              </label>
+            <div className="row">
+              <div className='form-group col-xs-6'>
+                <label className='control-label'>{' '}</label>
+                <div className='checkbox'>
+                  <label>
+                    <input type='checkbox'
+                      checked={this.state.isRtl}
+                      onChange={this._set.bind(null, 'isRtl', !this.state.isRtl)}/>
+                      Right to Left
+                  </label>
+                </div>
+              </div>
+              <div className='form-group col-xs-6'>
+                <label className='control-label'>culture</label>
+                <RW.DropdownList 
+                    value={this.state.culture || cultures[0]} 
+                    data={cultures}
+                    onChange={this._set.bind(null, 'culture')}/>
+              </div>
             </div>
             <div className="row">
               <div className='form-group col-xs-7'>

diff --git a/docs/components/pages/DateTimePicker.jsx b/docs/components/pages/DateTimePicker.jsx
@@ -134,7 +134,7 @@ var DateTimePicker = React.createClass({
             Globalize.js documentation <i className="fa fa-external-link"></i>
           </a>
         </p>
-        <EditableExample codeText={require('../examples/prop')(widgetName, { editFormat: 'd', format: '"MMM dd yyyy"'})}/>
+        <EditableExample codeText={require('../examples/prop')(widgetName, { defaultValue: 'new Date()', editFormat: '"d"', format: '"MMM dd yyyy"'})}/>
 
 
         <PropHeader type='Number' default="false">step</PropHeader>

diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx
@@ -155,7 +155,7 @@ var DateTimePicker = React.createClass({
 
           ['rw-open' + (dropUp ? '-up' : '')]: this.props.open
         })}>
-
+        
         <DateInput ref='valueInput'
           aria-labelledby={this.props['aria-labelledby']}
           aria-activedescendant={ this.props.open
@@ -347,21 +347,26 @@ var DateTimePicker = React.createClass({
 
   _parse: function(string){
     var format = getFormat(this.props, true)
+      , editFormat = this.props.editFormat
+      , parse = this.props.parse
       , formats = [];
 
-    if ( typeof this.props.parse === 'function' )
-      return this.props.parse(string, this.props.culture)
+    if ( typeof parse === 'function' )
+      return parse(string, this.props.culture)
 
-    if ( typeof format !== 'function')
+    if ( typeof format === 'string')
       formats.push(format)
 
-    if (this.props.parse)
+    if ( typeof editFormat === 'string')
+      formats.push(editFormat)
+
+    if ( parse )
       formats = formats.concat(this.props.parse)
 
     invariant(formats.length, 
       'React Widgets: there are no specified `parse` formats provided and the `format` prop is a function. ' +
       'the DateTimePicker is unable to parse `%s` into a dateTime, ' +
-      'please provide either a parse function or Globalize.js compatible string format', string);
+      'please provide either a parse function or Globalize.js compatible string for `format`', string);
 
     return formatsParser(formats, this.props.culture, string);
   },

diff --git a/src/util/dates.js b/src/util/dates.js
@@ -93,21 +93,16 @@ var dates = module.exports = _.assign(dateMath, {
     return dates.add(dates.firstOfCentury(date), 99, 'year')
   },
 
-  firstVisibleDay: function(date){
   firstVisibleDay: function(date, culture){
     var firstOfMonth = dates.startOf(date, 'month')
-    return dates.startOf(firstOfMonth, 'week');
+    return dates.startOf(firstOfMonth, 'week', dates.startOfWeek(culture));
   },
 
-  lastVisibleDay: function(date){
   lastVisibleDay: function(date, culture){
     var endOfMonth = dates.endOf(date, 'month')
-    return dates.endOf(endOfMonth, 'week');
+    return dates.endOf(endOfMonth, 'week', dates.startOfWeek(culture));
   },
 
-  visibleDays: function(date){
-    var current = dates.firstVisibleDay(date)
-      , last = dates.lastVisibleDay(date)
   visibleDays: function(date, culture){
     var current = dates.firstVisibleDay(date, culture)
       , last = dates.lastVisibleDay(date, culture)