Skip to content

Commit 24a9a65

Browse files
authored
style: read me polish
1 parent ca191ec commit 24a9a65

File tree

1 file changed

+38
-27
lines changed

1 file changed

+38
-27
lines changed

README.md

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
# NativeScript DateTimePicker
22

3-
A [NativeScript](https://www.nativescript.org) plugin that provides ui elements for picking date and time. The plugin provides two fields - DatePickerField and TimePickerField - both are NativeScript Views that show selected date or time and allow picking another after being tapped. There is also a DateTimePicker class which provides static methods pickDate and pickTime that can be called to show the same dialog picker as the fields
4-
5-
<img src="docs/date_picker_field.png" />
6-
<img src="docs/time_picker_field.png" />
3+
A [NativeScript](https://www.nativescript.org) plugin that provides ui elements for picking date and time. The plugin provides two fields - `DatePickerField` and `TimePickerField` - both are NativeScript Views that show selected date or time and allow picking another after being tapped. There is also a `DateTimePicker` class which provides static methods `pickDate` and `pickTime` that can be called to show the same dialog picker as the fields.
74

85
<!-- TOC depthFrom:2 -->
96
- [Installation](#installation)
@@ -15,6 +12,8 @@ A [NativeScript](https://www.nativescript.org) plugin that provides ui elements
1512
- [API](#api)
1613
- [Contribute](#contribute)
1714
- [Get Help](#get-help)
15+
<img src="docs/date_picker_field.png" width="500px"/>
16+
<img src="docs/time_picker_field.png" width="500px"/>
1817

1918
## Installation
2019
```
@@ -25,8 +24,8 @@ tns plugin add nativescript-datetimepicker
2524
No additional configuration required!
2625

2726
## Usage
28-
To use the DatePickerField and TimePickerField in markup you need to:
29-
- register their namespace in the xml if you are developing a NativeScript Core app.
27+
To use the `DatePickerField` and `TimePickerField` in markup you need to:
28+
- If you are developing a NativeScript Core app, you need to register the plugin namespace in the xml:
3029
```xml
3130
<Page
3231
xmlns="http://schemas.nativescript.org/tns.xsd"
@@ -35,7 +34,7 @@ To use the DatePickerField and TimePickerField in markup you need to:
3534
<datetime:TimePickerField hint="select time"/>
3635
...
3736
```
38-
- import their module in the module of your component if you are developing a NativeScript Angular app.
37+
- If you are developing a NativeScript Angular app, you need to import the plugin module in the module of your component:
3938
```ts
4039
import { NativeScriptDateTimePickerModule } from "nativescript-datetimepicker/angular";
4140
...
@@ -47,7 +46,7 @@ import { NativeScriptDateTimePickerModule } from "nativescript-datetimepicker/an
4746
],
4847
...
4948
```
50-
- install the plugin in you app.js file, if you are developing a NativeScript Vue app:
49+
- If you are developing a NativeScript Vue app, you need to install the plugin in you app.js file:
5150
```js
5251
import Vue from "nativescript-vue";
5352
import DateTimePicker from "nativescript-datetimepicker/vue";
@@ -57,36 +56,44 @@ Vue.use(DateTimePicker);
5756
## Features
5857
5958
### DatePickerField and TimePickerField
60-
The DatePickerField and the TimePickerField are NativeScript Views that extend TextField, when tapped, they open a picker dialog that allows date/time selection.
59+
The `DatePickerField` and the `TimePickerField` are NativeScript Views that extend `TextField`, when tapped, they open a picker dialog that allows date/time selection.
60+
61+
- Getting/Setting Date and Time
6162
62-
- Getting/Setting the date and time
63-
The DatePickerField has a date property and the TimePickerField has a time property which can be used to get their current value. You can also set their value through markup. DatePickerField's date property will just pass the string you provide as a parameter to the [Date constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), while the TimePickerField's time property can parse values in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) format.
63+
The `DatePickerField` has a date property and the `TimePickerField` has a time property which can be used to get their current value. You can also set their value through markup. `DatePickerField`'s date property will just pass the string you provide as a parameter to the [Date constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), while the TimePickerField's time property can parse values in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) format.
6464
65-
- TextField features
66-
Both DatePickerField and TimePickerField extend TextField, so each TextField feature like hint, is also available for these fields.
65+
- TextField Features
66+
67+
Both `DatePickerField` and `TimePickerField` extend `TextField`, so each `TextField` feature like `hint`, is also available for these fields.
6768
6869
- Picker Texts
69-
When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties pickerOkButtonText, pickerCancelButtonText and pickerTitle. By default, the texts of the buttons OK and Cancel are OK and Cancel on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on android. The pickerTitle is undefined.
70+
71+
When one of the fields is tapped, a popup is opened. The popup has an OK and Cancel buttons and an optional title. Their text values are controlled respectively by the properties `pickerOkText`, `pickerCancelText` and `pickerTitle`. By default, the texts of the buttons OK and Cancel are `OK` and `Cancel` on iOS, and a localized version of OK and Cancel, dependent on the current setting of the device on android. The `pickerTitle` is undefined.
7072
7173
- Localization
72-
By default the DatePickerField and the TimePickerField will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified [here](https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html) as Locale ID. For example, using en_UK will result in month names spinner in the middle and values between 0 and 23 for the hours, while using en_US will result in month names spinner on the left and values between 1 and 12 for the hours.
74+
75+
By default the `DatePickerField` and the `TimePickerField` will use the current language and region settings of the device to determine their locale. The locale is used for the names of the months, for the date picking spinners order (the month selector can be either the first or the second spinner) and whether the time is in 12h or 24h format. Both fields have a locale property that accepts values in the format specified [here](https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html) as Locale ID. For example, using `en_UK` will result in month names spinner in the middle and values between 0 and 23 for the hours, while using `en_US` will result in month names spinner on the left and values between 1 and 12 for the hours.
7376
7477
- Formats
75-
Aside from the default formats that are dependant on the locale value, you can add your custom format that can include ordering of the date/time values and also custom text. The format property of the DatePickerField is dateFormat and the format property of the TimePickerField is timeFormat.
7678
77-
- Minimum and Maximum dates
78-
The DatePickerField has a minDate and maxDate properties that allow limiting the values that can be selected.
79+
Aside from the default formats that are dependant on the locale value, you can add your custom format that can include ordering of the date/time values and also custom text. The format property of the `DatePickerField` is `dateFormat` and the format property of the `TimePickerField` is `timeFormat`.
80+
81+
- Minimum and Maximum Dates
82+
83+
The `DatePickerField` has a minDate and maxDate properties that allow limiting the values that can be selected.
7984
80-
- Using 12 h and 24 h time formats
81-
The TimePickerField will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property.
85+
- Using 12 h and 24 h Time Formats
86+
87+
The `TimePickerField` will determine whether to use 12 or 24 hour format (for formatting of the selected time in the field and for the values of the hour spinner) based on the selected region in the settings of the iOS device and based on the Use 24-Hour Format settings of the Android device. To change the default setting on Android, you need to use the timeFormat property and to change the setting on iOS, you need to use the locale property.
8288
8389
- CSS
84-
You can use css to style the DatePickerField and the TimePickerField. The field itself can be styled just as every other TextField, additionally the picker supports changing of its colors through predefined css classes: date-time-picker (picker background and title text color), date-time-picker-spinners (background and text color of the date/time selecting spinners), date-time-picker-buttons (background and text color of the OK/Cancel buttons), date-time-picker-button-ok and date-time-picker-button-cancel (to provide a separate style for each button). Please note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.
90+
You can use css to style the `DatePickerField` and the `TimePickerField`. The field itself can be styled just as every other TextField, additionally the picker supports changing of its colors through predefined css classes: `date-time-picker` (picker background and title text color), `date-time-picker-spinners` (background and text color of the date/time selecting spinners), `date-time-picker-buttons` (background and text color of the OK/Cancel buttons), `date-time-picker-button-ok` and `date-time-picker-button-cancel` (to provide a separate style for each button). Please note that the iOS native implementation has limited capabilities for the buttons background colors. When a button is marked as a Cancel button, its background is always white and can't be changed. If you really need a cancel button with another color, you can pass a background color through the designated cancel button class, however this will change the picker layout and place the cancel button along with the OK button and they will both have the same background color.
8591
86-
<img src="docs/date_picker_field_css.png" />
92+
<img src="docs/date_picker_field_css.png" width="500px"/>
8793
8894
### DateTimePicker
89-
Internally DatePickerField and TimePickerField call DateTimePicker's pickDate and pickTime methods which are public, so they can also be manually called in case a more customized picker is desired. The pickDate method accepts DatePickerOptions, while the pickTime method accepts TimePickerOptions. These options allow having the same features as in the fields.
95+
96+
Internally `DatePickerField` and `TimePickerField` call `DateTimePicker`'s `pickDate` and `pickTime` methods which are public, so they can also be manually called in case a more customized picker is desired. The `pickDate` method accepts `DatePickerOptions`, while the `pickTime` method accepts `TimePickerOptions`. These options allow having the same features as in the fields.
9097
9198
## API
9299
@@ -97,7 +104,7 @@ Internally DatePickerField and TimePickerField call DateTimePicker's pickDate an
97104
| `date` | The date the picker field is currently displaying. |
98105
| `minDate` | The minimum date the picker field can select. |
99106
| `maxDate` | The maximum date the picker field can select. |
100-
| `locale` | Identifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_UK first spinner is day, with en_US first spinner is month) (default is based on the device’s locale settings). |
107+
| `locale` | Identifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with `en_UK` first spinner is day, with `en_US` first spinner is month) (default is based on the device’s locale settings). |
101108
| `dateFormat` | Format used for the text in the picker field (on android used as a pattern for a [SimpleDateFormat](https://developer.android.com/reference/java/text/SimpleDateFormat), on iOS used as a dateFormat for [NSDateFormatter](https://developer.apple.com/documentation/foundation/nsdateformatter), default is generated by the current value of the `locale` property). |
102109
| `pickerDefaultDate` | The date that will be displayed in the picker, if it is opened while date is undefined (if `pickerDefaultDate` is undefined, the picker will display today) |
103110
| `pickerTitle` | Text that will be displayed as title of the picker, default is undefined. |
@@ -119,35 +126,39 @@ Internally DatePickerField and TimePickerField call DateTimePicker's pickDate an
119126
### DateTimePicker API
120127
121128
**DateTimePicker**:
129+
122130
| Method | Description |
123131
| --- | --- |
124132
| `pickDate(options: DatePickerOptions, style?: DateTimePickerStyle): Promise<Date>` | picks a date from a dialog picker initialized with the provided options and styled with the optionally provided style. |
125133
| `pickTime(options: TimePickerOptions, style?: DateTimePickerStyle): Promise<Date>` | picks a time from a dialog picker initialized with the provided options and styled with the optionally provided style. |
126134
127135
**DatePickerOptions**:
136+
128137
| Property | Description |
129138
| --- | --- |
130139
| `context` | View's context. |
131140
| `date` | The date that will be displayed in the picker, (if not provided, the picker will display today). |
132141
| `minDate` | The minimum date that can be selected. |
133142
| `maxDate` | The maximum date that can be selected. |
134-
| `locale` | Identifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with en_UK first spinner is day, with en_US first spinner is month, default is based on the device’s locale settings). |
143+
| `locale` | Identifier of a locale that will be used to localize the names of the month names and also the order of the spinners (with `en_UK` first spinner is day, with `en_US` first spinner is month, default is based on the device’s locale settings). |
135144
| `title` | Text that will be displayed as title of the picker, default is undefined. |
136145
| `okButtonText` | Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)). |
137146
| `cancelButtonText` | Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)). |
138147
139148
**TimePickerOptions**:
149+
140150
| Property | Description |
141151
| --- | --- |
142152
| `context` | View's context. |
143153
| `time` | The time that will be displayed in the picker, (if not provided, the picker will display now). |
144154
| `is24Hours` | This value will be used only on Android to determine whether the picker will be in 12 or 24 hour format. |
145-
| `locale` | Identifier of a locale that will be used to create locale-specific time formatter of the time (if the format is 12-Hour, with de_DE locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with en_US locale “am”/”pm” will be used, default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format. |
155+
| `locale` | Identifier of a locale that will be used to create locale-specific time formatter of the time (with `de_DE` locale “vorm.”/”nachm.” will be used to show whether time is before/after noon, with `en_US` locale “am”/”pm” will be used, default is based on the device’s locale settings). The locale will also be used on iOS to determine whether the picker will be in 12 or 24 hour format. |
146156
| `title` | Text that will be displayed as title of the picker, default is undefined. |
147157
| `okButtonText` | Text for the confirmation button of the picker (default is OK on iOS, localized version of OK on android (based on the devices locale settings)). |
148158
| `cancelButtonText` | Text for the cancel button of the picker (default is Cancel on iOS, localized version of Cancel on android (based on the devices locale settings)). |
149159
150160
**DateTimePickerStyle**:
161+
151162
| Property | Description |
152163
| --- | --- |
153164
| `titleTextColor` | Color to be used for the title text. |
@@ -166,4 +177,4 @@ Internally DatePickerField and TimePickerField call DateTimePicker's pickDate an
166177
We love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-datetimepicker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
167178
168179
## Get Help
169-
Please, use [github issues](https://github.com/NativeScript/nativescript-datetimepicker/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).
180+
Please, use [github issues](https://github.com/NativeScript/nativescript-datetimepicker/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).

0 commit comments

Comments
 (0)