IU-Data DatePicker v1.0.0

1 - Presentation & features

This add-on allows you to select a date in a widget and to easily navigate between months / years / decades / centuries and to retrieve the date in the FileMaker format chosen directly in a FileMaker solution.

Simply made with a web viewer, it is possible to configure the web viewer completely independently with a simple copy and paste. Responsive, the size is determined by the size of the web viewer.

Features :

  • Selection and retrieve of one or more dates according to a chosen format
  • Selection of the calendar language following a multitude of choices
  • Next / previous navigation
  • Navigation on month / year / decade / century views
  • Possibility to deactivate the views and limit the accessible dates
  • Current day display
  • Showing or hiding week numbers
  • Possibility to highlight certain days of the week
  • Possibility to deactivate certain days of the week
  • Possibility to deactivate certain dates
  • Customization of the background color, the color of the current date, the color of the selected dates
  • FileMaker script for interaction with the Add-on
  • Responsive
  • No context needed

This add-on uses the JavaScript libraries jQuery, bootstrap-datepicker.js and the style sheet bootstrap.min.css.

2 - Installation / Configuration / Parameters

2.1 Installation

  1. Close FileMaker Pro

  2. Copy the folder IUD_DatePicker_v1_AddOn to the following directory :

     - macOs : ~/Library/Application Support/FileMaker/Extensions/AddonModules/
 - Windows : AppData\Local\FileMaker\Extensions\AddonModules\

  3. In FileMaker Pro, open the solution on which you want to add the Add-On

  4. In layout mode, open the left side panel on the Add-ons tab, click on the button add

  5. Under the IU-DATA category, select DatePicker then click on Choose

  6. Drag and drop the DatePicker add-on on the layout where you want to add-it.

2.1 Configuration

The add-on can work without any context thanks by using the global field IUD_DatePicker::gct_WV_FinalCode.

  1. Copy and paste the web viewer containing the add-on calculation formula on the desired model.

  2. Modify the _fieldName parameter in the web viewer calculation, to specify the field that will receive the color code.

  3. Modify the other parameters.

Example of code associated with the web viewer :

Let ( 
[
_fieldName = GetFieldName ( Table1::Field1 ) ;
_language = IUD_DatePicker::language ;
_format = IUD_DatePicker::format ;
_multidate = IUD_DatePicker::multidate ;

_weekStart = IUD_DatePicker::weekStart ;
_calendarWeeks = IUD_DatePicker::calendarWeeks ;
_todayHighlight = IUD_DatePicker::todayHighlight ;

_startView = IUD_DatePicker::startView ;
_minViewMode = IUD_DatePicker::minViewMode ;
_maxViewMode = IUD_DatePicker::maxViewMode ;

_startDate = IUD_DatePicker::startDate ;
_endDate = IUD_DatePicker::endDate ;

_daysOfWeekDisabled = IUD_DatePicker::daysOfWeekDisabled ;
_daysOfWeekHighlighted = IUD_DatePicker::daysOfWeekHighlighted ;
_datesDisabled = IUD_DatePicker::datesDisabled ;

_activeDateColor = IUD_DatePicker::activeDateColor ;
_todayDateColor = IUD_DatePicker::todayDateColor ;
_borderRadius = IUD_DatePicker::borderRadius ;
_background_Color = IUD_DatePicker::background_Color ;


_nbCol = Case ( _calendarWeeks = "true" ; 8 ; 7 ) ; 

_Code = IUD_DatePicker::gct_WV_FinalCode ;

_FinalCode = Substitute (
               _Code ; 

               [ "{{fieldName}}" ; _fieldName ] ;
               [ "{{language}}" ; _language ] ;
               [ "{{format}}" ; _format ] ;
               [ "{{multidate}}" ; _multidate ] ;

               [ "{{weekStart}}" ; _weekStart ] ;
               [ "{{startDate}}" ; _startDate ] ;
               [ "{{endDate}}" ; _endDate ] ;

               [ "{{daysOfWeekDisabled}}" ; _daysOfWeekDisabled ] ;
               [ "{{daysOfWeekHighlighted}}" ; _daysOfWeekHighlighted ] ;
               [ "{{datesDisabled}}" ; _datesDisabled ] ;

               [ "{{calendarWeeks}}" ; _calendarWeeks ] ;
               [ "{{todayHighlight}}" ; _todayHighlight ] ;

               [ "{{startView}}" ; _startView ] ;
               [ "{{minViewMode}}" ; _minViewMode ] ;
               [ "{{maxViewMode}}" ; _maxViewMode ] ;

               [ "{{nb_Col}}" ; _nbCol ];
               [ "{{activeDateColor}}" ; _activeDateColor ];
               [ "{{todayDateColor}}" ; _todayDateColor ];
               [ "{{borderRadius}}" ; _borderRadius ];
               [ "{{background_Color}}" ; _background_Color ]

            )
]
;
"data:text/html;charset=utf-8,¶" & _FinalCode
)

2.2 Parameters

Editable parameter values :

⚠️   if you modify the names of the parameters, you will have to report your modifications to _finalCode if necessary

  • _fieldName : Define the target field
  • _language : Define the DatePicker language
  • _format : Define the dates format
  • _multidate : Allows multidate selection
  • _weekStart : Define the week day start
  • _calendarWeeks : Show the weeks number
  • _todayHighlight : Highlight the current date
  • _startView : View at the web viewer load
  • _minViewMode : Minimal view mode
  • _maxViewMode : Maximal view mode
  • _startDate : DatePicker minimal date
  • _endDate : DatePicker maximal date
  • _daysOfWeekDisabled : Define the disabled days of the week
  • _daysOfWeekHighlighted : Define the highlighted days of the week
  • _datesDisabled : Define the disabled dates
  • _activeDateColor : Active dates color
  • _todayDateColor : Current date color
  • _borderRadius : Border radius of the selected dates
  • _background_Color : Web viewer's background color

⚠️   Parameters not to be modified :

  • _nbCol : Variable that calculate the number of column regarding _calendarWeeks
  • _code : HTML code of the DatePicker contained in the global field IUD_DatePicker::gct_WV_FinalCode
  • _finalCode : Final HTML code of DatePicker, value of _code with the replacement of previous parameters

3 - Tables / Scripts / Custom functions / Value lists

3.1 - Tables

  • z_IUD_DATEPICKER : Table containing the definition of the add-on

3.2 - Scripts

  • IUD_fmps_DatePIcker_getDate : Script called from the web viewer to retrieve the date

3.3 - Custom functions

No Custom Functions in this add-on.

3.4 - Value lists

  • IU-DATA - DatePicker - Languages : List of all selectable languages
  • IU-DATA - DatePicker - Format : List of selectable date formats
jQuery v3.5.1 ( Licence MIT )
  • jquery_3.5.1.slim.min.js

https://code.jquery.com/jquery-3.5.1.slim.min.js

Bootstrap DatePicker v1.9.1 ( Licence MIT )
  • bootstrap-datepicker.js
  • bootstrap-datepicker3.css

https://bootstrap-datepicker.readthedocs.io/en/latest/

Bootstrap v3.2.0 ( Licence MIT )
  • bootstrap.min.css

https://getbootstrap.com

5 - Compatibilities

Operating systems :

  • macOS Big Sur 11.0
  • macOS Catalina 10.15
  • macOS Mojave 10.14
  • Windows 8.1 64-bit
  • Windows 10 64-bit

Plateforms :

  • Claris FileMaker Pro 19
  • Claris FileMaker Go 19

Please note that on FileMaker Go 19 the DatePicker activation inside the web viewer require a double tap.

6 - End User Licence Agreement

Important Note: Please read this EULA carefully. Downloading, installing, using or modifying this add-on signifies that the end user and their organization accept this EULA.

Definitions :

  • The add-on is DatePicker v1.0.0.
  • The end user is the physical person who purchased the add-on on IU-DATA's website.
  • The organization is the structure or the company for which the end user works.
  • The household refers to the end user's family home.

Contract terms :
IU-DATA authorizes the end user and his organization or household to use, modify, copy the add-on at their convenience. IU-DATA authorizes the end user and his organization to use for commercial purposes the add-on, when the add-on is an integral part of a solution whose spectrum of use is much wider than that defined by the functionalities of the add-on alone. On the other hand, IU-DATA does not authorize the end user and his organizationto use for commercial or distribution purposes the add-on, modified or not as a final product.

The end user and his organization / household have free assistance for a period of 2 months from the date of purchase of this add-on, for any questions related to the use and configuration of this add-on.
Full access to FileMaker sources as well as to the source code used in the web viewer gives to the end user and his organization / household full control over modifying this add-on. It is therefore natural that we cannot intervene free of charge on the add-on whose code has been altered compared to the original version that IU-DATA delivered. Likewise, IU-DATA cannot be held responsible for any malfunction of any libraries mentioned in paragraph 4 - Dependencies, as well as malfunctions of the add-on following use on an operating system or a FileMaker platform other than those mentioned in paragraph 5 - Compatibilities.

Contact :
For any questions, please contact us to this address: product@iu-data.com

7 - Credits

Creation and development :

Icon design :

8 - Change Log

16/02/2021 - DatePicker v1.0.0 - 1st release