API Reference: UI.DatePicker​
DatePicker is a dialog from which the user can select a date.
TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages
. Extend that class with below typescript classes.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import System = require("sf-core/device/system");import DatePicker = require('sf-core/ui/datepicker');​​//You should create new Page from UI-Editor and extend with it.export default class AlertViewSample extends PageSampleDesign {​myDatePicker: DatePicker;​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));​this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}​/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = System.OS === "Android" ? this : this.parentController;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;​this.myDatePicker.show();}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​this.myDatePicker = new DatePicker();this.myDatePicker.onDateSelected = function (date) {alert('Year: ' + date.getFullYear() + ' Month: ' + date.getMonth() + ' Day' + date.getDate());};}
const Page = require("sf-core/ui/page");const extend = require("js-base/core/extend");const DatePicker = require('sf-core/ui/datepicker');const FlexLayout = require('sf-core/ui/flexlayout');​​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false; //For AndroidmyDatePicker.show();}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;​var myDatePicker = new DatePicker();myDatePicker.onDateSelected = function(date) {alert('Year: ' + date.getFullYear() + ' Month: ' + date.getMonth() + ' Day' + date.getDate());};​});module.exports = Page1;
​​
​
DatePicker can be customizable on both platform.
Properties of DatePicker only works with show method. Must set before show method.
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import System = require("sf-core/device/system");import DatePicker = require('sf-core/ui/datepicker');import Color = require('sf-core/ui/color');import Font = require('sf-core/ui/font');​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​myDatePicker: DatePicker;​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));​this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}​/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = System.OS === "Android" ? this : this.parentController;superOnShow();Application.statusBar.visible = false;headerBar.visible = false;​this.myDatePicker.show();}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​this.myDatePicker = new DatePicker({android: {style: DatePicker.Android.Style.DEFAULT_DARK}});​this.myDatePicker.ios.title = "Smartface";this.myDatePicker.ios.titleColor = Color.BLACK;this.myDatePicker.ios.okColor = Color.BLACK;this.myDatePicker.ios.cancelColor = Color.RED;this.myDatePicker.ios.cancelHighlightedColor = Color.create(79, 84, 88, 100);this.myDatePicker.ios.okHighlightedColor = Color.BLUE;this.myDatePicker.ios.datePickerMode = DatePicker.iOS.DatePickerMode.DATEANDTIME;this.myDatePicker.ios.titleFont = Font.create("Arial", 20, Font.BOLD_ITALIC);this.myDatePicker.ios.cancelFont = Font.create("Arial", 16, Font.BOLD_ITALIC);this.myDatePicker.ios.okFont = Font.create("Arial", 16, Font.BOLD_ITALIC);this.myDatePicker.onDateSelected = (date): void => {alert('Year: ' + date.getFullYear() + ' Month: ' + date.getMonth() + ' Day:' + date.getDate());};this.myDatePicker.onCancelled = (): void => {alert('Cancelled');};}
const Page = require("sf-core/ui/page");const extend = require("js-base/core/extend");const DatePicker = require('sf-core/ui/datepicker');const FlexLayout = require('sf-core/ui/flexlayout');const Font = require('sf-core/ui/font');const Color = require('sf-core/ui/color');​​var Page1 = extend(Page)(function(_super) {_super(this, {onShow: function(params) {Application.statusBar.visible = false;this.headerBar.visible = false;myDatePicker.show();}});this.layout.flexDirection = FlexLayout.FlexDirection.ROW;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;​var myDatePicker = new DatePicker({android: {style: DatePicker.Android.Style.DEFAULT_DARK}});​myDatePicker.ios.title = "Smartface";myDatePicker.ios.titleColor = Color.BLACK;myDatePicker.ios.okColor = Color.BLACK;myDatePicker.ios.cancelColor = Color.RED;myDatePicker.ios.cancelHighlightedColor = Color.create(79, 84, 88, 100);myDatePicker.ios.okHighlightedColor = Color.BLUE;myDatePicker.ios.datePickerMode = DatePicker.iOS.DatePickerMode.DATEANDTIME;myDatePicker.ios.titleFont = Font.create("Arial", 20, Font.BOLD_ITALIC);myDatePicker.ios.cancelFont = Font.create("Arial", 16, Font.BOLD_ITALIC);myDatePicker.ios.okFont = Font.create("Arial", 16, Font.BOLD_ITALIC);myDatePicker.onDateSelected = function(date) {alert('Year: ' + date.getFullYear() + ' Month: ' + date.getMonth() + ' Day:' + date.getDate());};myDatePicker.onCancelled = function() {alert('Cancelled');};​});module.exports = Page1;
​