Skip to content

Commit

Permalink
refactor: add date-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
NickIliev committed Mar 22, 2018
1 parent b785790 commit fd96131
Show file tree
Hide file tree
Showing 14 changed files with 137 additions and 1 deletion.
2 changes: 1 addition & 1 deletion app/main-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const navigationLinks = [
new link("Animations", "ui/animations/animations-page"),
new link("Button", "ui/button/button-page"),
new link("Borders", "ui/borders/borders-page"),
new link("DatePicker", "ui/date-picker/date-picker-page"),

new link("DatePicker", "/date-picker"),
new link("Dialogs", "/dialogs"),
new link("Layouts", "/layouts"),
new link("TimePicker", "ui/time-picker/time-picker-page"),
Expand Down
7 changes: 7 additions & 0 deletions app/ui/date-picker/basics/article.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
The date picker element can accept JavaScript `Date` object for `date`, `minDate`, and `maxDate` properties.
Emiting the properties `minDate` and `maxDate` will set default year range from 1900 AD to 2100 AD.
<snippet id='date-picker-basics-date'/>
<snippet id='date-picker-dates'/>

The control can also accept number values for `day`, `month`, and `year` properties.
<snippet id='date-picker-basics-props'/>
15 changes: 15 additions & 0 deletions app/ui/date-picker/basics/basics-page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const Observable = require("tns-core-modules/data/observable").Observable;

function onNavigatingTo(args) {
const page = args.object;
const vm = new Observable();

// >> date-picker-dates
const TODAY = new Date();
vm.set("date", TODAY);
vm.set("minDate", new Date(1975, 0, 29));
vm.set("maxDate", new Date(2045, 4, 12));
// << date-picker-dates
page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;
13 changes: 13 additions & 0 deletions app/ui/date-picker/basics/basics-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<Page.actionBar>
<ActionBar title="Basics"/>
</Page.actionBar>
<StackLayout verticalAlignment="middle">
<!-- >> date-picker-basics-date -->
<DatePicker date="{{ date }}" minDate="{{ minDate }}" maxDate="{{ maxDate }}"></DatePicker>
<!-- << date-picker-basics-date -->
<!-- >> date-picker-basics-props -->
<DatePicker day="20" month="04" year="1980"></DatePicker>
<!-- << date-picker-basics-props -->
</StackLayout>
</Page>
5 changes: 5 additions & 0 deletions app/ui/date-picker/code-behind/article.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Using a `DatePicker` in code-behind files requires the `tns-core-modules/ui/date-picker` module.
<snippet id='date-picker-require'/>

Creating and controlling `DatePicker` programmatically.
<snippet id='date-picker-code-behind'/>
20 changes: 20 additions & 0 deletions app/ui/date-picker/code-behind/code-behind-page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// >> date-picker-require
const DatePicker = require("tns-core-modules/ui/date-picker").DatePicker;
// << date-picker-require

exports.onStackLoaded = function(args) {
const stack = args.object;

// >> date-picker-code-behind
const datePicker = new DatePicker();
datePicker.day = 20;
datePicker.month = 4;
datePicker.year = 1980;
// datePicker.date = new Date(1980, 4, 20);

datePicker.minDate = new Date(1970, 12, 31);
datePicker.maxDate = new Date(2040, 4, 20);
// << date-picker-code-behind

stack.addChild(datePicker);
};
6 changes: 6 additions & 0 deletions app/ui/date-picker/code-behind/code-behind-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<Page.actionBar>
<ActionBar title="Code-Behind"/>
</Page.actionBar>
<StackLayout verticalAlignment="middle" loaded="onStackLoaded" />
</Page>
15 changes: 15 additions & 0 deletions app/ui/date-picker/date-picker-page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const ListViewLinksModel = require("../../links-view-model");
const link = require("../../link");
const navigationLinks = [
new link("Basics", "/ui/date-picker/basics/basics-page"),
new link("Code-Behind", "/ui/date-picker/code-behind/code-behind-page"),
new link("Styling", "/ui/date-picker/styling/styling-page")
];
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new ListViewLinksModel({
links: navigationLinks,
actionBarTitle: args.context.title
});
}
exports.onNavigatingTo = onNavigatingTo;
6 changes: 6 additions & 0 deletions app/ui/date-picker/date-picker-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:myList="components" navigatingTo="onNavigatingTo">
<Page.actionBar>
<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
</Page.actionBar>
<myList:list/>
</Page>
7 changes: 7 additions & 0 deletions app/ui/date-picker/end.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
**API Reference for** [DatePicker Class](http://docs.nativescript.org/api-reference/modules/_ui_date_picker_.html)

**Native Component**

| Android | iOS |
|:-----------------------|:---------|
| [android.widget.DatePicker](http://developer.android.com/reference/android/widget/DatePicker.html) | [UIDatePicker](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html) |
3 changes: 3 additions & 0 deletions app/ui/date-picker/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
NativeScript provides a `DatePicker` control that enables the user to choose a date as a ready-to-use dialog.
Every date part can be picked separately by its corresponding section of the control - for day, month and year.

21 changes: 21 additions & 0 deletions app/ui/date-picker/styling/article.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
There are some limitations when styling `DatePicker` component, casued by the way the different native
controls works on Android and on iOS. One major difference is that on Android we can control the font color by modifying the `colors.xml` file
in `App_Resources/Android/values/colors.xml` while on iOS we can directly use the CSS property `color`.
<snippet id='date-picker-styles'/>

> **Android specifics:** On Android API21+ we can also change our `DatePicker` from the default `spinner` mode to `calendar` mode and also change the
default background and color using the project's `app/App_Resources/Android/values-v21/colors.xml` color settings.
To achieve that, go to `app/App_Resources/Android/values-v21/styles.xml` and modify the `DatePicker` default style.
```XML
<!-- DatePicker in calendar mode -->
<style name="AppTheme" parent="AppThemeBase">
<item name="android:datePickerStyle">@style/CalendarDatePicker</item>
</style>

<style name="CalendarDatePicker" parent="android:Widget.Material.Light.DatePicker">
<item name="android:datePickerMode">calendar</item>
<item name="colorPrimary">@color/ns_blue</item>
<item name="colorPrimaryDark">@color/ns_primaryDark</item>
<item name="colorAccent">@color/ns_accent</item>
</style>
```
8 changes: 8 additions & 0 deletions app/ui/date-picker/styling/styling-page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* >> date-picker-styles */
.date-picker {
background-color: lightgray;
border-radius: 20;
color: orangered; /* iOS only*/
width: 80%;
}
/* << date-picker-styles */
10 changes: 10 additions & 0 deletions app/ui/date-picker/styling/styling-page.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
<Page.actionBar>
<ActionBar title="Basics"/>
</Page.actionBar>
<StackLayout verticalAlignment="middle">
<!-- >> date-picker-styling -->
<DatePicker day="20" month="04" year="1980" class="date-picker"></DatePicker>
<!-- << date-picker-styling -->
</StackLayout>
</Page>

0 comments on commit fd96131

Please sign in to comment.