Skip to content

Commit 1244639

Browse files
marijohannessenmarijohannessen
authored
feat(date-picker): added date picker component (#143)
* feat(date-picker): initial work * feat(date-picker): added more examples * feat(date-picker): added test file * feat(date-picker): temp removed a11y from testing * feat(date-picker): added back test * feat(date-picker): refactored the js * feat(date-picker): refactored the js * feat(date-picker): refactored the js and scss * feat(date-picker): added more methods * feat(date-picker): started writing tests * feat(date-picker): more test work * feat(date-picker): addressed comments, removed yarn file * feat(date-picker): made some more changes * feat(date-picker): fixed options and config * feat(date-picker): removed commented code in test * feat(date-picker): fixed demo env * feat(date-picker): fixed some input logic * feat(date-picker): temp commented out a11y test * feat(date-picker): added keyboard navigation * feat(date-picker): added more imports to date picker scss * feat(date-picker): more work on tests * feat(date-picker): trying to fix some issues * feat(date-picker): removed spacing * feat(date-picker): going through more tests * feat(date-picker): refactored a little bit and added docs * feat(date-picker): added weekday shorthand logic * feat(date-picker): fixed tests * feat(date-picker): added a117 back in * feat(date-picker): demo changes again * feat(date-picker): fixed docs and the form requirements * feat(date-picker): fixed demo file
1 parent 698c234 commit 1244639

File tree

17 files changed

+1619
-14
lines changed

17 files changed

+1619
-14
lines changed

‎demo/scss/demo.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../../src/globals/scss/styles';
2+
23
.demo--container {
34
@include grid-container;
45
box-sizing: border-box;
@@ -8,7 +9,7 @@
89
padding: 1rem;
910
margin-top: 5rem;
1011
transition: .2s;
11-
min-height: 2000px;
12+
// min-height: 2000px;
1213
background-color: $ui-02;
1314

1415
&.flex-col {

‎demo/views/demo-all.dust‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width">
7-
<title>Bluemix Components</title>
7+
<title>Carbon Components</title>
88
<link rel="stylesheet" href="/demo.css">
99
<style>
1010
body {
@@ -46,14 +46,8 @@
4646
<input type="text" class="offleft">
4747

4848
<!-- Scripts -->
49-
<!-- <script src="../../dist/bluemix-components.min.js"></script> -->
50-
<script src="/demo.js"></script>
51-
<!-- Disable Auto Init with this flag -->
52-
<!-- true = JavaScript will not initialize automatically -->
53-
<!-- false = JavaScript will initialize automatically -->
54-
<script>
55-
CarbonComponents.settings.disableAutoInit = false;
56-
</script>
49+
<script src="/carbon-components.min.js"></script>
50+
<!-- <script src="/demo.js"></script> -->
5751
</body>
5852

5953
</html>

‎demo/views/demo-es5.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040

4141

4242
<!-- Scripts -->
43-
<!-- <script src="../bluemix-components.min.js"></script> -->
44-
<script src="../../dist/bluemix-components.min.js"></script>
43+
<script src="carbon-components.min.js"></script>
4544
</body>
4645
</html>

‎gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ gulp.task('test:a11y', ['sass:compiled'], done => {
309309
// Watch Tasks
310310
gulp.task('watch', () => {
311311
gulp.watch('src/**/**/*.html').on('change', browserSync.reload);
312-
gulp.watch(['src/**/**/*.js'], ['scripts:dev']);
312+
gulp.watch(['src/**/**/*.js'], ['scripts:dev', 'scripts:compiled']);
313313
gulp.watch(['src/**/**/*.scss', 'demo/**/*.scss'], ['sass:dev']);
314314
});
315315

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
],
3131
"dependencies": {
3232
"carbon-icons": "^6.0.4",
33+
"flatpickr": "2.6.3",
3334
"lodash.debounce": "^4.0.8"
3435
},
3536
"devDependencies": {

‎server.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ app.set('view engine', 'dust');
3030
app.set('views', path.resolve(__dirname, 'demo/views'));
3131
app.use(express.static('demo'));
3232
app.use(express.static('src'));
33+
app.use(express.static('scripts'));
3334
app.use('/docs/js', express.static('docs/js'));
3435

3536
const getContent = glob =>

‎src/components/date-picker/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
### JavaScript
2+
3+
The date picker is built on top of [Flatpickr](https://chmln.github.io/flatpickr/), so the [events](https://chmln.github.io/flatpickr/events/) and [config options](https://chmln.github.io/flatpickr/options/) that come with Flatpickr is therefore available to the date picker. This includes methods for setting a min date, max date, disabling date(s), specifiying a range of dates, and more.
4+
5+
#### Public Methods
6+
7+
| Name | Params | Description |
8+
|---------|---------|----------------------|
9+
| release | | Deletes the instance |
10+
11+
#### Options
12+
13+
| Option | Default Selector | Description |
14+
|-----------------------------|-------------------------------------|-------------------------------------------------------|
15+
| selectorInit | [data-date-picker] | Element for initializing instance |
16+
| selectorDatePickerInput | [data-date-picker-input] | Input element |
17+
| selectorDatePickerInputFrom | [data-date-picker-input-from] | For ranged calendars only: The "From date" input element |
18+
| selectorDatePickerInputTo | [data-date-picker-input-to] | For ranged calendars only: The "To date" input element |
19+
| selectorDatePickerIcon | [data-date-picker-icon] | Calendar icon |
20+
| classCalendarContainer | .bx--date-picker__calendar | Class selector for the calendar container |
21+
| classMonth | .bx--date-picker__month | Class selector for the calendar month |
22+
| classWeekdays | .bx--date-picker__weekdays | Class selector for the calendar weekdays |
23+
| classDays | .bx--date-picker__days | Class selector for the calendar days |
24+
| classWeekday | .bx--date-picker__weekday | Class selector for a calendar weekday |
25+
| classDay | .bx--date-picker__day | Class selector for a calendar day |
26+
| attribType | data-date-picker-type | Specifies the calendar mode (single or range) |
27+
| dateFormat | 'm/d/Y' | The date format given to the calendar instance |
28+
29+
30+
### FAQ
31+
32+
#### Using and understanding Date Picker
33+
34+
There are 3 different date picker types:
35+
36+
| Type | data-date-picker-type |
37+
|--|--|
38+
| A simple date picker without a calendar | No data attributes needed |
39+
| A single date picker | [data-date-picker-type="single"] |
40+
| A ranged date picker | [data-date-picker-type="range"] |
41+
42+
**The simple date picker** is a text input without a calendar. You can specify the pattern for the text input to make sure the user enters the correct date format. The default regex pattern that ships with the
43+
simple date picker is \d{1,2}/\d{4} ('dd/yyyy' for short date pickers) and \d{1,2}/\d{1,2}/\d{4} ('dd/mm/yyyy' or mm/dd/yyyy). The simple date picker does not require any JavaScript.
44+
45+
**The single date picker** is a text input with a calendar instance attached to it. It also ships with a calendar icon inside the input field. The calendar will open when the input is focused, and the user can both type in a date or select a day from the calendar. The single date picker requires JavaScript, so the data attributes `data-date-picker` and `data-date-picker-type="single"` are required on the parent div, and the data attribute `data-date-picker-input` is required on the input field.
46+
47+
**The ranged date picker** has two text inputs with a ranged calendar instance attached to them. The ranged date picker requires JavaScript, so the data attributes `data-date-picker` and `data-date-picker-type="range"` are required on the parent div, and the data attributes `data-date-picker-input-from` and `data-date-picker-input-to` are required on the two input fields.
48+
49+
#### Localization
50+
51+
Date Picker supports localization, and you can specify the date format by overriding the component option `dateFormat`. Supported date formats are listed [here](https://chmln.github.io/flatpickr/formatting/).
52+
53+
To localize the date picker globally, please follow [these instructions](https://chmln.github.io/flatpickr/localization/).

0 commit comments

Comments
 (0)