1179 - Datepicker: Ability to set first day of week

app/views/components/datepicker/test-set-first-day-of-week.html

@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="twelve columns">
+    <h2>Date Picker: Setting first day of the week</h2>
+    <p>Add a firstDayofWeek option to datepicker that overrides whats used in locale.</p>
+    <br />
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+    <div class="field">
+      <label for="date-field-normal" class="label">Date Field</label>
+      <input id="date-field-normal" class="datepicker" name="date-field" type="text"/>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('body').on('initialized', function () {
+    $('#date-field-normal').datepicker({
+      firstDayOfWeek: 1 // starts on Monday
+    });
+  });
+</script>

src/components/datepicker/datepicker.js

@@ -34,6 +34,7 @@ const COMPONENT_NAME = 'datepicker';
  *  rounds the minutes value to the nearest interval when the field is blurred.
  * @param {string} [settings.dateFormat='locale'] Defaults to current locale but can be
  * @param {string} [settings.placeholder=false] Text to show in input element while empty.
+ * @param {number} [settings.firstDayOfWeek=null] Set first day of the week. '1' would be Monday.
  * @param {object} [settings.disable] Disable dates in various ways.
  * For example `{minDate: 'M/d/yyyy', maxDate: 'M/d/yyyy'}`. Dates should be in format M/d/yyyy
  * or be a Date() object or string that can be converted to a date with new Date().
@@ -88,6 +89,7 @@ const DATEPICKER_DEFAULTS = {
   roundToInterval: undefined,
   dateFormat: 'locale', // or can be a specific format
   placeholder: false,
+  firstDayOfWeek: null,
   disable: {
     dates: [],
     minDate: '',

src/components/monthview/monthview.js

@@ -13,6 +13,7 @@ const COMPONENT_NAME_DEFAULTS = {
   activeDateIslamic: null,
   isPopup: false,
   headerStyle: 'full',
+  firstDayOfWeek: null,
   disable: {
     dates: [],
     minDate: '',
@@ -54,6 +55,7 @@ const COMPONENT_NAME_DEFAULTS = {
  * @param {number} [settings.activeDateIslamic] The date to highlight as selected/today (as an array for islamic)
  * @param {number} [settings.isPopup] Is it in a popup (datepicker using it)
  * @param {number} [settings.headerStyle] Configure the header, this can be 'simple' or 'full'. Full adds a picker and today link.
+ * @param {number} [settings.firstDayOfWeek=null] Set first day of the week. '1' would be Monday.
  * @param {object} [settings.disable] Disable dates in various ways.
  * For example `{minDate: 'M/d/yyyy', maxDate: 'M/d/yyyy'}`. Dates should be in format M/d/yyyy
  * or be a Date() object or string that can be converted to a date with new Date().
@@ -325,7 +327,12 @@ MonthView.prototype = {
     this.currentYear = year;
 
     // Set the Days of the week
-    const firstDayofWeek = (this.currentCalendar.firstDayofWeek || 0);
+    let firstDayofWeek = (this.currentCalendar.firstDayofWeek || 0);
+
+    if (this.settings.firstDayOfWeek) {
+      firstDayofWeek = this.settings.firstDayOfWeek;
+    }
+
     this.dayNames.find('th').each(function (i) {
       $(this).text(days[(i + firstDayofWeek) % 7]);
     });

test/components/datepicker/datepicker.e2e-spec.js

@@ -860,6 +860,22 @@ describe('Datepicker restrict month selection tests', () => {
   });
 });
 
+describe('Datepicker set first day of week tests', () => {
+  beforeEach(async () => {
+    await utils.setPage('/components/datepicker/test-set-first-day-of-week');
+  });
+
+  it('Should set first day of week', async () => {
+    const triggerEl = await element(by.tagName('thead'));
+    await element(by.css('#date-field-normal + .icon')).click();
+
+    expect(await element(by.css('.is-focused'))).toBeTruthy();
+
+    const testEl = await triggerEl.all(by.tagName('th')).get(0);
+    expect(await testEl.getText()).toEqual('M');
+  });
+});
+
 describe('Datepicker Custom Validation Tests', () => {
   beforeEach(async () => {
     await utils.setPage('/components/datepicker/example-validation');