Support function in timeFormat

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### v3.1.2
+* `timeFormat` now can receive a function
+
 ### v3.1.1
 * fixed css compilation, [#461](https://github.com/t1m0n/air-datepicker/issues/461)
 * fixed `autoClose` when range mode is on, [#466](https://github.com/t1m0n/air-datepicker/issues/466)

dist/air-datepicker.d.ts

@@ -91,7 +91,7 @@ export declare type AirDatepickerOptions = {
     timepicker: boolean,
     onlyTimepicker: boolean,
     dateTimeSeparator: string,
-    timeFormat: string,
+    timeFormat: string | ((d: Date) => string),
     minHours: number,
     maxHours: number,
     minMinutes: number,

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "air-datepicker",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "scripts": {
     "dev": "set NODE_ENV=development&& webpack",
     "dev:serve": "npm run browser&& set NODE_ENV=development&& webpack serve",

docs/examples/commonExamples.js

@@ -77,6 +77,14 @@ export let timeFormatOption =
     timeFormat: 'hh:mm AA'
 });
 `
+export let timeFormatFuncOption =
+`new AirDatepicker('#el', {
+    timepicker: true,
+    onlyTimepicker: true,
+    timeFormat: function (date) {
+        return date.toLocaleTimeString('en-US');
+    }
+})`
 
 let customCellExample =
 `let today = new Date();

docs/locales/en.js

@@ -165,6 +165,7 @@ export default {
     optsDateTimeSeparator: 'Separator between date and time.',
     optsOnlyTimepicker: 'If you need to choose only time, without date.',
     optsTimeFormat: 'Time format. Just like {dateFormatField} relies on {standardLink}. If you pass a 12-hour display format, the time sliders will be automatically adjusted to the corresponding mode.',
+    timeFormatFuncOptionNote: 'You can also pass a function here to manually process the selected time. It should return a string. This function only affects in time only mode.',
     optsTimeFormath: 'hours in 12-hour mode',
     optsTimeFormathh: 'hours in 12-hour mode with leading zero',
     optsTimeFormatH: 'hours in 24-hour mode',

docs/locales/ru.js

@@ -165,6 +165,7 @@ export default {
     optsDateTimeSeparator: 'Разделитель между датой и временем.',
     optsOnlyTimepicker: 'Если нужно выбрать только время без конкретной даты.',
     optsTimeFormat: 'Формат времени. Так же как и {dateFormatField} опирается на {standardLink}. Если передать 12-часовой формат отображения часов, то ползунки времени будут автоматически подстроены под соответствующий режим.',
+    timeFormatFuncOptionNote: 'Вы также можете передать сюда функцию для ручной обработки выбранного времени. Он должен вернуть строку. Эта функция влияет только на режим «только время».',
     optsTimeFormath: 'часы в 12-часовом формате',
     optsTimeFormathh: 'часы в 12-часовом формате с лидирующим нулем',
     optsTimeFormatH: 'часы в 24-часовом формате',

docs/pages/docs.js

@@ -357,7 +357,7 @@ function Docs({} = {}) {
                                 <Param name={'dateTimeSeparator'} type={'string'} defaultValue={'" "'}>
                                     <Paragraph id={'optsDateTimeSeparator'} />
                                 </Param>
-                                <Param name={'timeFormat'} type={'string'}>
+                                <Param name={'timeFormat'} type={'string | (date) => string'}>
                                     <Paragraph
                                         id={'optsTimeFormat'}
                                         values={{
@@ -376,6 +376,17 @@ function Docs({} = {}) {
                                         <DList.Item value={'aa'} definition={'optsTimeFormataa'} />
                                         <DList.Item value={'AA'} definition={'optsTimeFormatAA'} />
                                     </DList>
+                                    <Paragraph id='timeFormatFuncOptionNote'/>
+                                    <Example>
+                                        <AirDatepicker
+                                            timepicker={true}
+                                            onlyTimepicker={true}
+                                            timeFormat={function (date) {
+                                                return date.toLocaleTimeString('en-US');
+                                            }}
+                                        />
+                                        <Code>{examples.timeFormatFuncOption}</Code>
+                                    </Example>
                                 </Param>
                                 <Param name={'minHours'} type={'number'} defaultValue={'0'}>
                                     <Paragraph id={'optsMinHours'}/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "air-datepicker",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "scripts": {
     "dev": "set NODE_ENV=development&& webpack",
     "dev:serve": "npm run browser&& set NODE_ENV=development&& webpack serve",

src/datepicker.d.ts

@@ -91,7 +91,7 @@ export declare type AirDatepickerOptions = {
     timepicker: boolean,
     onlyTimepicker: boolean,
     dateTimeSeparator: string,
-    timeFormat: string,
+    timeFormat: string | ((d: Date) => string),
     minHours: number,
     maxHours: number,
     minMinutes: number,

src/datepicker.js

@@ -300,7 +300,7 @@ export default class Datepicker {
             this.locale.firstDay = firstDay;
         }
 
-        if (timepicker && typeof dateFormat !== 'function') {
+        if (timepicker && typeof dateFormat !== 'function' && typeof timeFormatValidated !== 'function') {
             let separator = timeFormatValidated ? dateTimeSeparator : '';
             this.locale.dateFormat = [this.locale.dateFormat, (timeFormatValidated ? timeFormatValidated : '')].join(separator);
         }

src/datepickerTime.js

@@ -30,8 +30,15 @@ export default class DatepickerTime {
         this.dp = dp;
         let {timeFormat} = this.dp.locale;
 
-        if (timeFormat && (timeFormat.match(getWordBoundaryRegExp('h')) || timeFormat.match(getWordBoundaryRegExp('hh')))) {
-            this.ampm = true;
+        if (timeFormat) {
+            if (typeof timeFormat !== 'function' && (timeFormat.match(getWordBoundaryRegExp('h')) || timeFormat.match(getWordBoundaryRegExp('hh')))) {
+                this.ampm = true;
+            } else if (typeof timeFormat === 'function') {
+                const formattedTime = timeFormat(new Date()).toLowerCase();
+                if (formattedTime.includes('am') || formattedTime.includes('pm')) {
+                    this.ampm = true;
+                }
+            }
         }
 
         this.init();