forked from NativeScript/nativescript-sdk-examples-js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
137 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |