requirejs.config({ // Path mappings for the logical module names paths: { 'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min', 'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min', "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui", "jqueryui-amd": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui", "promise": "//cdn.rawgit.com/components/es6-promise/c95149ffaa2e8162601c57d4282362eac84f929b/promise.min", "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min", "ojdnd": "//cdn.rawgit.com/oracle/oraclejet/master/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min", "ojs": "//cdn.rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/debug", "ojL10n": "//cdn.rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/ojL10n", "ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/resources", "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min", "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min", }, // Shim configurations for modules that do not expose AMD shim: { 'jqueryui-amd': { exports: "$", deps: ['jquery'] }, 'jquery': { exports: ['jQuery', '$'] } }, config: { ojL10n: { merge: { //'ojtranslations/nls/ojtranslations': 'resources/nls/menu' // The following addes en-US to the r.js bundle //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements' } } } }); require(['knockout', 'ojs/ojcore', 'jquery', 'ojs/ojknockout', 'ojs/ojknockout-validation', 'ojs/ojinputtext' ], function(ko, oj, $) { 'use strict'; var observerConfig = { attributes: true, childList: true, characterData: true }; // Custom binding handler that wraps ojInputText and provides extra functionality ko.bindingHandlers.html5DateInputText = { // setup extension to ojInputText as well as register event handlers init: function(element, valueAccessor, allBindingsAccessor, ctx) { var options = allBindingsAccessor().ojInputTextOptions || {}; var observer = new MutationObserver(function(mutations) { ko.utils.arrayForEach(mutations, function(mutation) { if (mutation.type === 'attributes') { if (mutation.attributeName === 'type') { var $target = $(mutation.target); if ($target.attr('type') !== 'date') { $target.attr('type', 'date'); } } } }); }); observer.observe(element, observerConfig); $(element) .ojInputText(options) .on({ 'ojoptionchange': function (event, data) { //console.log(data) // use option === "value" for final value // use option === "rawValue" for each character if(data.option === "rawValue") { var val = data.value; var observable = valueAccessor(); observable(val); } } }) //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).ojInputText("destroy"); observer.disconnect(); console.log("ojInputText destroyed"); }); }, // This is how we update the UI based on observable changes update: function(element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).ojInputText("option", "value", value); } }; var ViewModel = function() { var self = this; self.value = ko.observable(); self.validate = function() { $("#text-input").ojInputText("validate"); }; }; ko.applyBindings(new ViewModel()); });
<div class="content-container"> <p> <label for="text-input">HTML5 ojInputText Component</label> <!-- this is the only important part in the HTML --> <input id="text-input" type="text" required data-bind="html5DateInputText: value, ojInputTextOptions: {}"/> </p> <!-- output text to demonstrate 2-way data binding --> <p> You said, "<span data-bind="text: value"></span>" </p> <p> Confirm that a validation message appears if ojInputText is empty: </p> <button data-bind="click: validate"> Validatation Test </button> <pre data-bind="text: ko.toJSON($root, null, 2)"></pre> </div>
@import url('//rawgit.com/oracle/oraclejet/master/dist/css/alta/oj-alta-min.css'); @import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'); .content-container { margin: 10px; } .oj-inputtext-input[type=date] { padding: 5px; }