0
# Configuration Options
1

2
Comprehensive configuration system with 80+ options for customizing datetimepicker appearance, behavior, and functionality.
3

4
## Capabilities
5

6
### Display Options
7

8
Control the visual appearance and layout of the datetimepicker.
9

10
```javascript { .api }
11
interface DisplayOptions {
12
    /** Date/time format string (default: 'Y/m/d H:i') */
13
    format?: string;
14
    /** Time-only format string (default: 'H:i') */
15
    formatTime?: string;
16
    /** Date-only format string (default: 'Y/m/d') */
17
    formatDate?: string;
18
    /** Enable date picker (default: true) */
19
    datepicker?: boolean;
20
    /** Enable time picker (default: true) */
21
    timepicker?: boolean;
22
    /** Display inline instead of popup (default: false) */
23
    inline?: boolean;
24
    /** CSS theme class (default: '') */
25
    theme?: string;
26
    /** Additional CSS classes (default: '') */
27
    className?: string;
28
    /** Right-to-left layout (default: false) */
29
    rtl?: boolean;
30
    /** Show week numbers (default: false) */
31
    weeks?: boolean;
32
    /** Use 12-hour format (default: false) */
33
    hours12?: boolean;
34
}
35
```
36

37
**Usage Examples:**
38

39
```javascript
40
// Date picker only
41
$('#datepicker').datetimepicker({
42
    datepicker: true,
43
    timepicker: false,
44
    format: 'd/m/Y'
45
});
46

47
// Time picker only with 12-hour format
48
$('#timepicker').datetimepicker({
49
    datepicker: false,
50
    timepicker: true,
51
    format: 'h:i A',
52
    hours12: true
53
});
54

55
// Inline date picker with weeks
56
$('#inline').datetimepicker({
57
    inline: true,
58
    weeks: true,
59
    theme: 'dark'
60
});
61
```
62

63
### Behavior Options
64

65
Control how the datetimepicker responds to user interactions.
66

67
```javascript { .api }
68
interface BehaviorOptions {
69
    /** Initial value (default: '') */
70
    value?: string;
71
    /** Time step in minutes (default: 60) */
72
    step?: number;
73
    /** Close on date selection (default: false) */
74
    closeOnDateSelect?: boolean;
75
    /** Close on time selection (default: true) */
76
    closeOnTimeSelect?: boolean;
77
    /** Close when clicking outside (default: true) */
78
    closeOnWithoutClick?: boolean;
79
    /** Close when clicking input (default: true) */
80
    closeOnInputClick?: boolean;
81
    /** Open on input focus (default: true) */
82
    openOnFocus?: boolean;
83
    /** Input masking (default: false) */
84
    mask?: boolean | string;
85
    /** Validate on blur (default: true) */
86
    validateOnBlur?: boolean;
87
    /** Allow empty values (default: true) */
88
    allowBlank?: boolean;
89
    /** Enable scrolling for month navigation (default: true) */
90
    scrollMonth?: boolean;
91
    /** Enable scrolling for time selection (default: true) */
92
    scrollTime?: boolean;
93
    /** Enable scrolling on input (default: true) */
94
    scrollInput?: boolean;
95
    /** Lazy initialization (default: false) */
96
    lazyInit?: boolean;
97
    /** Initialize with current time (default: true) */
98
    initTime?: boolean;
99
    /** Enable default selection (default: true) */
100
    defaultSelect?: boolean;
101
    /** Enter key acts as tab (default: true) */
102
    enterLikeTab?: boolean;
103
}
104
```
105

106
**Usage Examples:**
107

108
```javascript
109
// 15-minute intervals, closes on selection
110
$('#meeting-time').datetimepicker({
111
    step: 15,
112
    closeOnTimeSelect: true,
113
    closeOnDateSelect: true
114
});
115

116
// With input masking
117
$('#masked-input').datetimepicker({
118
    mask: '9999/19/39 29:59',
119
    format: 'Y/m/d H:i'
120
});
121

122
// Don't open on focus, manual control
123
$('#manual-picker').datetimepicker({
124
    openOnFocus: false,
125
    closeOnInputClick: false
126
});
127
```
128

129
### Date and Time Constraints
130

131
Set minimum and maximum values and restrict selectable dates/times.
132

133
```javascript { .api }
134
interface ConstraintOptions {
135
    /** Minimum selectable date */
136
    minDate?: Date | string | boolean;
137
    /** Maximum selectable date */
138
    maxDate?: Date | string | boolean;
139
    /** Minimum selectable time */
140
    minTime?: Date | string | boolean;
141
    /** Maximum selectable time */
142
    maxTime?: Date | string | boolean;
143
    /** Minimum selectable datetime */
144
    minDateTime?: Date | string | boolean;
145
    /** Maximum selectable datetime */
146
    maxDateTime?: Date | string | boolean;
147
    /** Default time when date is selected */
148
    defaultTime?: string | boolean;
149
    /** Default date when time is selected */
150
    defaultDate?: Date | string | boolean;
151
    /** Array of allowed time values */
152
    allowTimes?: string[];
153
    /** Array of allowed dates */
154
    allowDates?: (Date | string)[];
155
    /** Regular expression for allowed dates */
156
    allowDateRe?: RegExp | string;
157
    /** Array of disabled dates */
158
    disabledDates?: (Date | string)[];
159
    /** Array of disabled weekdays (0=Sunday) */
160
    disabledWeekDays?: number[];
161
    /** Starting year for year selector (default: 1950) */
162
    yearStart?: number;
163
    /** Ending year for year selector (default: 2050) */
164
    yearEnd?: number;
165
    /** Starting month (0-11, default: 0) */
166
    monthStart?: number;
167
    /** Ending month (0-11, default: 11) */
168
    monthEnd?: number;
169
    /** Year offset for display (default: 0) */
170
    yearOffset?: number;
171
}
172
```
173

174
**Usage Examples:**
175

176
```javascript
177
// Business hours only
178
$('#business-hours').datetimepicker({
179
    datepicker: false,
180
    allowTimes: [
181
        '09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
182
        '12:00', '12:30', '13:00', '13:30', '14:00', '14:30',
183
        '15:00', '15:30', '16:00', '16:30', '17:00'
184
    ]
185
});
186

187
// Date range restriction
188
$('#date-range').datetimepicker({
189
    minDate: new Date(),
190
    maxDate: '2024-12-31',
191
    disabledWeekDays: [0, 6] // Disable weekends
192
});
193

194
// Specific allowed dates
195
$('#allowed-dates').datetimepicker({
196
    allowDates: ['2023-12-25', '2023-12-26', '2024-01-01']
197
});
198
```
199

200
### Highlighting Options
201

202
Highlight specific dates, periods, or weekends.
203

204
```javascript { .api }
205
interface HighlightingOptions {
206
    /** Dates to highlight with optional description and style */
207
    highlightedDates?: (Date | string | HighlightedDate)[];
208
    /** Date periods to highlight */
209
    highlightedPeriods?: HighlightedPeriod[];
210
    /** Custom weekend days (default: []) */
211
    weekends?: number[];
212
}
213

214
interface HighlightedDate {
215
    date: Date;
216
    desc?: string;
217
    style?: string;
218
}
219

220
interface HighlightedPeriod {
221
    start: Date | string;
222
    end: Date | string;
223
    desc?: string;
224
    style?: string;
225
}
226
```
227

228
**Usage Examples:**
229

230
```javascript
231
// Highlight important dates
232
$('#events').datetimepicker({
233
    highlightedDates: [
234
        '2023-12-25,Christmas,color:red;',
235
        '2024-01-01,New Year,color:blue;'
236
    ]
237
});
238

239
// Highlight vacation periods
240
$('#vacation').datetimepicker({
241
    highlightedPeriods: [
242
        'start:2023-12-20,end:2024-01-05,desc:Holiday Period,style:background:yellow;'
243
    ]
244
});
245
```
246

247
### Appearance Options
248

249
Control visual elements and layout.
250

251
```javascript { .api }
252
interface AppearanceOptions {
253
    /** Show today button (default: true) */
254
    todayButton?: boolean;
255
    /** Show previous button (default: true) */
256
    prevButton?: boolean;
257
    /** Show next button (default: true) */
258
    nextButton?: boolean;
259
    /** Show apply button (default: false) */
260
    showApplyButton?: boolean;
261
    /** CSS class for next button (default: 'xdsoft_next') */
262
    next?: string;
263
    /** CSS class for previous button (default: 'xdsoft_prev') */
264
    prev?: string;
265
    /** Time item height in time picker (default: 25) */
266
    timeHeightInTimePicker?: number;
267
    /** Show time picker scrollbar (default: true) */
268
    timepickerScrollbar?: boolean;
269
    /** Enable month change spinner (default: true) */
270
    monthChangeSpinner?: boolean;
271
    /** First day of week (0=Sunday, default: 0) */
272
    dayOfWeekStart?: number;
273
    /** Hide copyright notice (default: true) */
274
    withoutCopyright?: boolean;
275
    /** Invert button behavior (default: false) */
276
    inverseButton?: boolean;
277
}
278
```
279

280
**Usage Examples:**
281

282
```javascript
283
// Minimal interface
284
$('#minimal').datetimepicker({
285
    todayButton: false,
286
    prevButton: false,
287
    nextButton: false,
288
    timepickerScrollbar: false
289
});
290

291
// Monday first, with apply button
292
$('#european').datetimepicker({
293
    dayOfWeekStart: 1,
294
    showApplyButton: true
295
});
296
```
297

298
### Layout Options
299

300
Control positioning and container behavior.
301

302
```javascript { .api }
303
interface LayoutOptions {
304
    /** Use fixed positioning (default: false) */
305
    fixed?: boolean;
306
    /** Keep picker inside parent element (default: false) */
307
    insideParent?: boolean;
308
    /** Parent container selector (default: 'body') */
309
    parentID?: string;
310
    /** Touch move threshold for mobile (default: 5) */
311
    touchMovedThreshold?: number;
312
    /** Element ID for picker (default: '') */
313
    id?: string;
314
    /** Inline styles for picker (default: '') */
315
    style?: string;
316
}
317
```
318

319
**Usage Examples:**
320

321
```javascript
322
// Fixed positioning in modal
323
$('#modal-date').datetimepicker({
324
    fixed: true,
325
    parentID: '#modal-container'
326
});
327

328
// Keep inside specific container
329
$('#contained').datetimepicker({
330
    insideParent: true,
331
    parentID: '#form-container'
332
});
333
```
334

335
### Advanced Options
336

337
Advanced configuration for specialized use cases.
338

339
```javascript { .api }
340
interface AdvancedOptions {
341
    /** Time rounding method: 'round', 'ceil', 'floor' (default: 'round') */
342
    roundTime?: 'round' | 'ceil' | 'floor';
343
    /** Custom function to determine if a day should be shown */
344
    beforeShowDay?: (date: Date) => [boolean, string?, string?];
345
    /** Custom week number calculation */
346
    onGetWeekOfYear?: (date: Date) => number;
347
    /** Whether picker is initially opened (default: false) */
348
    opened?: boolean;
349
    /** Start date for relative calculations */
350
    startDate?: Date | string | boolean;
351
}
352
```
353

354
**Usage Examples:**
355

356
```javascript
357
// Custom day rendering
358
$('#custom-days').datetimepicker({
359
    beforeShowDay: function(date) {
360
        var day = date.getDay();
361
        if (day === 0 || day === 6) {
362
            return [false, 'weekend', 'Weekend not available'];
363
        }
364
        return [true, '', ''];
365
    }
366
});
367

368
// Always round time up
369
$('#round-up').datetimepicker({
370
    roundTime: 'ceil',
371
    step: 15
372
});
373
```