Date Picker (datepicker)

As of CoreJs 9.5.0 we have a new date picker field type: 'datepicker'.

This new implementation is preferred over 'datetimepicker'. The new date picker is a forked implementation of ab-datepicker-2.1.17 for more information please see the github page of ab-datepicker. 

Please be aware that the original ab-datepicker doesn't use moment but it uses the JavaScript Date object in it's backend. Using Date() directly can sometimes cause timezone issues. 

The main object to represent a date in for the forked version is moment.

But since ab-datepicker uses the Date object I use the toDate() function of moment for many of the internal ab-datepicker logic such as the UI for building the calendars. 

This date picker has been tested to support the "YYYY-MM-DD" date format if we need to support additional formats please request them to the CoreJs development team. 

Usage Information

1. In package.json set "includeDatePicker": true,
2. Inside a CoT From deffination you can specify the JSON object for a file of type "datepicker"

Examples

Example 1: Minimum Options 

{
  "type": "datepicker",
  "id": "example_one_part_1",
  "title": "Minimum Configuration Date Picker Example",
  "bindTo": "example_one_part_1"
}

Example 2: Defaults Example (same as example 1 but it shows the defaults added by CoT Form)

{
  "type": "datepicker",
  "id": "example_one_part_2",
  "title": "CoT Form Defaults shown",
  "bindTo": "example_one_part_2",
  "options": {
    "firstDayOfWeek": 1,
    "gainFocusOnConstruction": false,
    "weekDayFormat": "narrow",
    "inputFormat": [
      "yyyy-MM-dd"
    ],
    "outputFormat": "yyyy-MM-dd",
    "titleFormat": "EEEE d MMMM y",
    "placeholder": "yyyy-MM-dd",
    "theme": "bootstrap",
    "modal": true,
    "expectedDateFormat": "YYYY-MM-DD",
    "momentValidationFormat": "YYYY-MM-DD",
    "overlayParentElement": "body"
  }
}

Example 3: Advanced Example

{
  "type": "datepicker",
  "id": "advancedDatepickerExample",
  "title": "Advanced Date Picker Example",
  "bindTo": "advancedDatepickerExample",
  "required": true,
  "prehelptext": "Now enter a date!",
  "requiredMessage": "You must enter a date it is required!",
  "infohelp": "This is an infohelp field, do you need help with something?",
  "placeholder": "1900-01-01",
  "posthelptext": "An example of a date picker field",
  "options": {
    "theme": "customThemeExample",
    "daysOfWeekDisabled": [
      0,
      6
    ],
    "datesDisabled": [
      "2020-08-02",
      "2020-08-05"
    ],
    "min": "2020-07-31",
    "max": "2020-08-31",
    "messages": {
      "max": "USER_ENTERED_DATE_VALUE is greater than MAX_DATE_VALUE",
      "min": "USER_ENTERED_DATE_VALUE is less than MIN_DATE_VALUE",
      "invalid_date": "\"USER_ENTERED_DATE_VALUE\" is not a valid date please enter a valid date",
      "empty": "",
      "invalid_selection": "USER_ENTERED_DATE_VALUE is a valid date but USER_ENTERED_DATE_VALUE can not be selected!"
    }
  }
}

Setting the Default Date Value

If you need to set the default date value one you can do this is by setting the value in your CotModel to key that binds to your date property.
So, if you date is defined as:

{
  "type": "datepicker",
  "id": "example_one_part_1",
  "title": "Minimum Configuration Date Picker Example",
  "bindTo": "example_one_part_1"
}

In your CotModel set the value of example_one_part_1 to the default date value. 

More Example:
Please see:
https://webapps.intra.qa-toronto.ca/webapps/corejs/showcase/#showcase_testDatePickerForm

Options

Please see: https://github.com/eureka2/ab-datepicker for documentation from original plugin author. 

Below are some important options that might be used most of the times or you need to be aware of for development. 

"bootstrap"

    {
      "max": "USER_ENTERED_DATE_VALUE is greater than MAX_DATE_VALUE",
      "min": "USER_ENTERED_DATE_VALUE is less than MIN_DATE_VALUE",
      "invalid_date": "\"USER_ENTERED_DATE_VALUE\" is not a valid date please enter a valid date",
      "empty": "",
      "invalid_selection": "USER_ENTERED_DATE_VALUE is a valid date but USER_ENTERED_DATE_VALUE can not be selected!"
    }

Modify the Options After Rendering

All options are set during rendering time of the CotForm if you need to change that please consider this:
Use the ID of your date picker to get access to the date picker object. 

let abDatepickerObj = $("#example_one_part_1").data("ab.datepicker");

Access the options and change them as required, you might need to test this for different options types since some of them get changed from string type to objects. 

abDatepickerObj.options.max = new Date("2021-09-24")

Implementation Notes

If you are running into issues related to overlay that is displayed when the calender open look in to this property:
options.overlayParentElement

Date Related Standards

Date Format

If you want to read date related standards please go to: Date / Time

Accessibility

Accessible Calendar / Date Picker Widgets Test Cases

Below are some of the test cases that were used to test this date picker these test cases are from: http://whatsock.com/bootstrap/. Click on the bootstrap button. 

Advanced Information for CoreJs Maintainers 

Making changes to the (ab-datepicker) in CoreJs

If you need to upgrade the ab-datepicker here are the instructions for CoreJs:

• gulp_helper.js - there is a logic to add date picker javascript and css files this logic depends on the value of: includeDatePicker 
• gulpfile.js - the css files are unified. Review: gulpfile.js
•  src/css/datepicker.css
• src/css/datepicker_customizations.css 
• test/showcase/showcase_gulp_helper.js has also been updated to be similar to gulp_helper.js
  
• src/js/cot_forms.js - the code logic here has been updated for 'datepicker' field
  
• test/showcase/src/scripts/ui_test/DatePickerForm.js  - this is the file for testing various cases of the date picker
  
• In CoT Form the date picker field type is named 'datepicker' but the css selector for this is set to 'corejs-datepicker', the 'datepicker' class is being used by 'ab-datepicker'.

Note not all changes are documented but this should help if you reviewing the code.

src/forked_libs/ab-datepicker-2.1.17/js/datepicker.js

Modified:
Datepicker.prototype.greyOut - some overlay logic
datepickerButton3 - changed how the aria-labelledby is defined
Added: This was added to make the validation logic work
Datepicker.prototype.getDateFieldValidation
Datepicker.prototype.setDateFieldValidation
Modified:
Datepicker.prototype.initializeDate - to allow the user to specify a starting date for the calender 
Datepicker.prototype.setDate - sets the data and

Modified: a lot of places were a new Date() or any Date object was being created was changed to use moment. We continue to use new moment().toDate() to get a date object.

/src/forked_libs/ab-datepicker-2.1.17/css/datepicker_customizations.css

Contains some custom CSS to meet our requirements