ノックアウトが更新された値を送信しない

Question

正規表現で入力をフォーマットしているノックアウトページがあります。入力フィールドをMM/dd/yyyy形式にします。したがって、ユーザが "1111"を入力すると、入力されたvboxは "01/01/2011"に、または "01111"には "01/01/2011"と表示されます。

私が直面している問題は、完全にフォーマットされたアイテムではなく、ユーザーが入力したキーストロークのみを返すことです。たとえば、ユーザーが入力している場合は、「1111年は、」私はここのHTMLセグメント

<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" data-regex="^((\d{0,2})|(\d{1,2}/?\d{0,2})|(\d{1,2}/?\d{1,2}/?\d{0,4}))$" 
         type="text" data-bind="textInput: dateofevent"/> 

がある代わりに、「2011年1月1日」

の「1111」取り戻すそして、私はノックアウトを持っているか、これはありますバインディング

var ViewModel = function (eventdt) { 
var self = this; 
self.dateofevent = ko.observable(eventdt); 
} 

viewModel = new ViewModel(""); 

ko.applyBindings(viewModel); 

私が間違っていることを理解しようとしています。

Answer 1

ユーザーが入力中にテキスト入力をフォーマットしようとしません。ユーザーインターフェイスと直感的ではない入力操作を理解しにくいためです。

さらに、入力中に入力が無効になる可能性があるため、より複雑です。キーストロークでそれを検証中

、いくつかのイベント（例えばぼかし）にご入力をフォーマットする代わりに試してみてください。

var viewModel = function() { 
 
    var self = this; 
 
    var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/; 
 
    this.isValid = ko.observable(false); 
 
    this.date = ko.observable(""); 
 
    this.format = function() { 
 
    self.validate(self.date()); 
 
    // TODO: something else 
 
    } 
 
    
 
    this.validate = function(newVal) { 
 
    var matches = newVal.match(regex); 
 
    if (!matches || matches.length != 4) { 
 
     self.isValid(false); 
 
    } else { 
 
     self.isValid(true); 
 
    } 
 
    }; 
 
    
 
    this.date.subscribe(function(newVal) { 
 
    self.validate(newVal); 
 
    }); 
 

 
    this.style = ko.computed(function() { 
 
    return self.isValid() ? "valid" : "invalid"; 
 
    }, this); 
 
}; 
 

 
var vm = new viewModel(); 
 

 
ko.applyBindings(vm);

.invalid { 
 
    border: 1px solid red; 
 
} 
 
.valid { 
 
    border: 1px solid green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input id="inpEventDt" placeholder="MM/DD/YYYY" class="input-small" data-date-blur="true" type="text" data-bind="textInput: date, event: { blur: format }, css: style" /> 
 
<div data-bind="visible: isValid">OK</div>

Answer 2

あなたはこのために計算された読み取り/書き込みを使用してみてください。計算された観測値については、ノックアウト文書のexample 3をご覧ください。

また、ここでは、日付の書式設定に役立つmoment.jsを使用してjsfiddleです。

var ViewModel = function (eventdt) { 
var self = this; 
self.dateofevent = ko.observable(eventdt); 

self.formattedDate = ko.pureComputed({ 
     read: function() { 
      return moment(self.dateofevent()).format("MM/DD/YYYY"); 
     }, 
     write: function (value) { 
      self.dateofevent(moment(value).toDate()); // Write to underlying storage 
     } 
    }); 

} 

viewModel = new ViewModel(new Date("03/25/2015")); 

ko.applyBindings(viewModel);