DatePicker From and To Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!How to clear a SAPUI5 input field with only value help input allowed?How do I create clickable areas on an sap.m.Image element?SAPUI5 Datepicker read onlyPut data from JSON file into local storageHow to undo user changes in a form that has been bound to an OData model?SAPUI5 Smart Table - Smart Field make field mandatory with annotationSAPUI5 Table cell valuestate disappearSAPUI5 multiple Aggregation BindingHow to Validate /check the input fields value exist in back end DB or not during live change in sapui5SAPPUI5 get selected item from table
My mentor says to set image to Fine instead of RAW — how is this different from JPG?
Caught masturbating at work
After Sam didn't return home in the end, were he and Al still friends?
Test print coming out spongy
Is multiple magic items in one inherently imbalanced?
Tips to organize LaTeX presentations for a semester
Did pre-Columbian Americans know the spherical shape of the Earth?
Where did this useful matrix decomposition come from for Nodal Analysis?
White walkers, cemeteries and wights
The test team as an enemy of development? And how can this be avoided?
Universal covering space of the real projective line?
Did Mueller's report provide an evidentiary basis for the claim of Russian govt election interference via social media?
Rationale for describing kurtosis as "peakedness"?
Trying to understand entropy as a novice in thermodynamics
Special flights
What is the "studentd" process?
Can you force honesty by using the Speak with Dead and Zone of Truth spells together?
Simple Http Server
Relating to the President and obstruction, were Mueller's conclusions preordained?
Co-worker has annoying ringtone
Delete free apps from library
In musical terms, what properties are varied by the human voice to produce different words / syllables?
what is the log of the PDF for a Normal Distribution?
Is it possible for an event A to be independent from event B, but not the other way around?
DatePicker From and To
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How to clear a SAPUI5 input field with only value help input allowed?How do I create clickable areas on an sap.m.Image element?SAPUI5 Datepicker read onlyPut data from JSON file into local storageHow to undo user changes in a form that has been bound to an OData model?SAPUI5 Smart Table - Smart Field make field mandatory with annotationSAPUI5 Table cell valuestate disappearSAPUI5 multiple Aggregation BindingHow to Validate /check the input fields value exist in back end DB or not during live change in sapui5SAPPUI5 get selected item from table
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
In a form, I have two DatePicker fields which are From and To. In this case user should not be able to choose a value for To less than what he/she choose for the From field.
I just wanted to know is there any SAPUI5 native way to do this comparison and validate the DatePicker fields? In the image blow, you can see that the From has a greater value than the To, which is wrong! In this case, I need to show the validation error around the fields.
sapui5
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
add a comment |
In a form, I have two DatePicker fields which are From and To. In this case user should not be able to choose a value for To less than what he/she choose for the From field.
I just wanted to know is there any SAPUI5 native way to do this comparison and validate the DatePicker fields? In the image blow, you can see that the From has a greater value than the To, which is wrong! In this case, I need to show the validation error around the fields.
sapui5
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
add a comment |
In a form, I have two DatePicker fields which are From and To. In this case user should not be able to choose a value for To less than what he/she choose for the From field.
I just wanted to know is there any SAPUI5 native way to do this comparison and validate the DatePicker fields? In the image blow, you can see that the From has a greater value than the To, which is wrong! In this case, I need to show the validation error around the fields.
sapui5
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
In a form, I have two DatePicker fields which are From and To. In this case user should not be able to choose a value for To less than what he/she choose for the From field.
I just wanted to know is there any SAPUI5 native way to do this comparison and validate the DatePicker fields? In the image blow, you can see that the From has a greater value than the To, which is wrong! In this case, I need to show the validation error around the fields.
sapui5
sapui5
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
edited Nov 28 '18 at 17:08
Boghyon Hoffmann
6,76062861
6,76062861
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
asked Nov 28 '18 at 16:14
Babak HashemiBabak Hashemi
1377
1377
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Assume you have the following 2 DatePicker objects in your xml view file:
<m:DatePicker id="__input_validFrom"
value="path: 'ZValidFrom', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="path: 'ZValidTo', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.
Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:
handleValidFromChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
minimum: new Date(sValue)
), "string");
,
handleValidToChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
maximum: new Date(sValue)
), "string");
As soon as user change value in one of fields we change the constraints in the other field.
Notes:
- Please note that we cannot directly bind the constraints to a model.
- By applying this solution you need to use validation on date pickers to see some validation state text.
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
add a comment |
By using the change event on the "from" picker we can then use the method setMinDate() for the "To" picker based on the date picked so the user can only select dates after the date selected.
On our XML view we can have both sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
And in our controller we can then apply the logic:
handleChange: function(oControlEvent)
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
By applying this method we can now get the new value from the first sap.m.DatePicker and apply it to the "To" Date Picker by using the setMinDate() method and reset its value so the user has to select a new date.
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
add a comment |
Is there any SAPUI5 native way to do this
Yes, take a look at Date Range Selection.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>
This solves the given problem:
- User needs to pick two date values. ✔️
- User should not be able to choose
Toless thanFrom. ✔️ - Looking for "UI5 native way" to solve this. ✔️
There is even the binding type: sap.ui.model.type.Date*Interval to enable:
- Two-way data binding ✔️
- Format options ✔️
- Input validation ✔️
Compared to the custom implementation with two DatePickers, DateRangeSelection requires:
- Less clicks for the user ✔️
- Zero JS code to maintain for handling date ranges ✔️
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523776%2fdatepicker-from-and-to%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Assume you have the following 2 DatePicker objects in your xml view file:
<m:DatePicker id="__input_validFrom"
value="path: 'ZValidFrom', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="path: 'ZValidTo', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.
Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:
handleValidFromChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
minimum: new Date(sValue)
), "string");
,
handleValidToChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
maximum: new Date(sValue)
), "string");
As soon as user change value in one of fields we change the constraints in the other field.
Notes:
- Please note that we cannot directly bind the constraints to a model.
- By applying this solution you need to use validation on date pickers to see some validation state text.
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
add a comment |
Assume you have the following 2 DatePicker objects in your xml view file:
<m:DatePicker id="__input_validFrom"
value="path: 'ZValidFrom', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="path: 'ZValidTo', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.
Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:
handleValidFromChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
minimum: new Date(sValue)
), "string");
,
handleValidToChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
maximum: new Date(sValue)
), "string");
As soon as user change value in one of fields we change the constraints in the other field.
Notes:
- Please note that we cannot directly bind the constraints to a model.
- By applying this solution you need to use validation on date pickers to see some validation state text.
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
add a comment |
Assume you have the following 2 DatePicker objects in your xml view file:
<m:DatePicker id="__input_validFrom"
value="path: 'ZValidFrom', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="path: 'ZValidTo', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.
Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:
handleValidFromChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
minimum: new Date(sValue)
), "string");
,
handleValidToChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
maximum: new Date(sValue)
), "string");
As soon as user change value in one of fields we change the constraints in the other field.
Notes:
- Please note that we cannot directly bind the constraints to a model.
- By applying this solution you need to use validation on date pickers to see some validation state text.
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
Assume you have the following 2 DatePicker objects in your xml view file:
<m:DatePicker id="__input_validFrom"
value="path: 'ZValidFrom', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="path: 'ZValidTo', type : 'sap.ui.model.type.Date'"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.
Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:
handleValidFromChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
minimum: new Date(sValue)
), "string");
,
handleValidToChange: function (oEvent)
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null,
maximum: new Date(sValue)
), "string");
As soon as user change value in one of fields we change the constraints in the other field.
Notes:
- Please note that we cannot directly bind the constraints to a model.
- By applying this solution you need to use validation on date pickers to see some validation state text.
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
edited Nov 29 '18 at 12:36
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
answered Nov 29 '18 at 12:18
Mahdi J.AnsariMahdi J.Ansari
67011541
67011541
add a comment |
add a comment |
By using the change event on the "from" picker we can then use the method setMinDate() for the "To" picker based on the date picked so the user can only select dates after the date selected.
On our XML view we can have both sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
And in our controller we can then apply the logic:
handleChange: function(oControlEvent)
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
By applying this method we can now get the new value from the first sap.m.DatePicker and apply it to the "To" Date Picker by using the setMinDate() method and reset its value so the user has to select a new date.
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
add a comment |
By using the change event on the "from" picker we can then use the method setMinDate() for the "To" picker based on the date picked so the user can only select dates after the date selected.
On our XML view we can have both sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
And in our controller we can then apply the logic:
handleChange: function(oControlEvent)
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
By applying this method we can now get the new value from the first sap.m.DatePicker and apply it to the "To" Date Picker by using the setMinDate() method and reset its value so the user has to select a new date.
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
add a comment |
By using the change event on the "from" picker we can then use the method setMinDate() for the "To" picker based on the date picked so the user can only select dates after the date selected.
On our XML view we can have both sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
And in our controller we can then apply the logic:
handleChange: function(oControlEvent)
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
By applying this method we can now get the new value from the first sap.m.DatePicker and apply it to the "To" Date Picker by using the setMinDate() method and reset its value so the user has to select a new date.
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
By using the change event on the "from" picker we can then use the method setMinDate() for the "To" picker based on the date picked so the user can only select dates after the date selected.
On our XML view we can have both sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
And in our controller we can then apply the logic:
handleChange: function(oControlEvent)
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
By applying this method we can now get the new value from the first sap.m.DatePicker and apply it to the "To" Date Picker by using the setMinDate() method and reset its value so the user has to select a new date.
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
edited Nov 29 '18 at 9:13
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
answered Nov 28 '18 at 17:19
Andre FAndre F
2981214
2981214
add a comment |
add a comment |
Is there any SAPUI5 native way to do this
Yes, take a look at Date Range Selection.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>
This solves the given problem:
- User needs to pick two date values. ✔️
- User should not be able to choose
Toless thanFrom. ✔️ - Looking for "UI5 native way" to solve this. ✔️
There is even the binding type: sap.ui.model.type.Date*Interval to enable:
- Two-way data binding ✔️
- Format options ✔️
- Input validation ✔️
Compared to the custom implementation with two DatePickers, DateRangeSelection requires:
- Less clicks for the user ✔️
- Zero JS code to maintain for handling date ranges ✔️
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
add a comment |
Is there any SAPUI5 native way to do this
Yes, take a look at Date Range Selection.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>
This solves the given problem:
- User needs to pick two date values. ✔️
- User should not be able to choose
Toless thanFrom. ✔️ - Looking for "UI5 native way" to solve this. ✔️
There is even the binding type: sap.ui.model.type.Date*Interval to enable:
- Two-way data binding ✔️
- Format options ✔️
- Input validation ✔️
Compared to the custom implementation with two DatePickers, DateRangeSelection requires:
- Less clicks for the user ✔️
- Zero JS code to maintain for handling date ranges ✔️
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
add a comment |
Is there any SAPUI5 native way to do this
Yes, take a look at Date Range Selection.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>
This solves the given problem:
- User needs to pick two date values. ✔️
- User should not be able to choose
Toless thanFrom. ✔️ - Looking for "UI5 native way" to solve this. ✔️
There is even the binding type: sap.ui.model.type.Date*Interval to enable:
- Two-way data binding ✔️
- Format options ✔️
- Input validation ✔️
Compared to the custom implementation with two DatePickers, DateRangeSelection requires:
- Less clicks for the user ✔️
- Zero JS code to maintain for handling date ranges ✔️
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
Is there any SAPUI5 native way to do this
Yes, take a look at Date Range Selection.
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>
This solves the given problem:
- User needs to pick two date values. ✔️
- User should not be able to choose
Toless thanFrom. ✔️ - Looking for "UI5 native way" to solve this. ✔️
There is even the binding type: sap.ui.model.type.Date*Interval to enable:
- Two-way data binding ✔️
- Format options ✔️
- Input validation ✔️
Compared to the custom implementation with two DatePickers, DateRangeSelection requires:
- Less clicks for the user ✔️
- Zero JS code to maintain for handling date ranges ✔️
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create(
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<App xmlns="sap.m">
<Page showHeader="false">
<DateRangeSelection
binding="/Employees(1)"
width="14rem"
value="
parts: [
'BirthDate',
'HireDate'
],
type: 'sap.ui.model.type.DateInterval'
"
/>
</Page>
</App>
</mvc:View>`,
models: new ODataModel(
serviceUrl: [
"https://cors-anywhere.herokuapp.com/",
"https://services.odata.org/V2/Northwind/Northwind.svc/"
].join(""),
tokenHandling: false,
preliminaryContext: true,
defaultBindingMode: "TwoWay"
),
).then(view =>
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(view, true);
view.placeAt("content");
)));<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
edited Mar 8 at 23:11
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
answered Nov 28 '18 at 17:05
Boghyon HoffmannBoghyon Hoffmann
6,76062861
6,76062861
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523776%2fdatepicker-from-and-to%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
