Używanie Knockout.js w jaki sposób powiązać właściwość Date z selektorem daty HTML5?

Question

(to działa tylko w Chrome, w tej chwili, ponieważ większość przeglądarek jeszcze nie wdrażają wyboru daty dla input type = „date”)

W poniższym przykładzie MyDate zaczyna się jako obiekt bieżąco z aktualną datą , ale nie jest to odbierane przez dane wejściowe daty (które oczekują, że jego format będzie ciągiem w formacie RRRR/MM/DD).

Po wybraniu daty w selektorze, MyDate staje się łańcuchem w powyższym formacie.

W jaki sposób można to powiązać, aby MyDate pozostała datą javascript i została poprawnie zinterpretowana przez kontrolę wejścia?

See Zobacz http://jsfiddle.net/LLkC4/3/: -

<input data-bind="value : MyDate" type="date"> 
<hr> 
<span data-bind="html: log" /> 

<script> 
var viewModel = {  
    MyDate : ko.observable(new Date()), 
    log : ko.observable(""), 
    logDate : function() { 
      this.log(this.log() + this.MyDate() + " : " + 
        typeof(this.MyDate()) + "<br>"); 
        } 
}; 

viewModel.MyDate.subscribe(function (date) {  
    viewModel.logDate();  
}); 

ko.applyBindings(viewModel); 

viewModel.logDate() 
</script> 

Answer 1

Podczas gdy odpowiedź @amakhrov będzie działała (i byłaby jeszcze lepsza, gdyby była używana do zapisu możliwego do zapisania jak sujested przez @Stijn) Postanowiłem zrobić to za pomocą Custom Bindings.

Główną zaletą tego jest wielokrotność użycia - po prostu muszę użyć data-bind="datePicker : MyDate" wszędzie tam, gdzie chcę to powiązać. Mogę także zmodyfikować inne właściwości elementu wejściowego, tak by było to naprawdę użyteczne, gdyby wiązało się ze złożonym jQuery (i inne) kontrole.

(Read here for more pro/cons o 3 wyborów robić tego typu rzeczy)

HTML

<input data-bind="datePicker : MyDate" type="date"> 

JS

ko.bindingHandlers.datePicker = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {      
     // Register change callbacks to update the model 
     // if the control changes.  
     ko.utils.registerEventHandler(element, "change", function() {    
      var value = valueAccessor(); 
      value(new Date(element.value));    
     }); 
    }, 
    // Update the control whenever the view model changes 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor();   
     element.value = value().toISOString(); 
    } 
}; 

var viewModel = {  
    MyDate : ko.observable(new Date()) 
};  

ko.applyBindings(viewModel); 

Zobacz http://jsfiddle.net/LLkC4/5/

Answer 2

Można użyć komputerowej vartiable dla obiektu daty w swoim modelu

W HTML:

<input data-bind="value : rawDate" type="date"> 

w postaci kodu:

var currentDate = (new Date()).toISOString().split('T')[0]; 

// this is used instead of MyDate in the data binding 
rawDate : ko.observable(currentDate), 

... 
// and then set up the dependent variable 
viewModel.MyDate = ko.computed(function() { 
    var val = this.rawDate(); 
    if (typeof val === 'string') val = new Date(val); 

    return val; 
}, viewModel) 

Proszę zobaczyć demo: http://jsfiddle.net/gcAXB/1/

Answer 3

Od HTML 5 - Input type date formatting on iOS

Istnieją dwa formaty w grę:

• wyświetlanego formatu
• wewnętrzny format narażone na JavaScript i wysyłane do serwera

Nie można zmienić formatu wyświetlania. Od przeglądarki zależy, czy użytkownik poda datę (w praktyce jest ona określana przez ustawienia regionalne systemu na ).

Nie można również zmienić formatu wewnętrznego. Zawsze jest to ISO8601, niezależnie od przeglądarki/ustawień regionalnych.

Musisz wstępnie wypełnić go z tym konkretnym formacie i można dodać obliczane obserwowalne do analizowania go w Date obiektu, dzięki czemu można go odczytać w innych miejscach w aplikacji.

Jeśli chcesz napisać do niego z JS, możesz skonfigurować writeable computed observable i przeanalizować dane wejściowe, aby sprawdzić, czy jest to ciąg znaków z pola wejściowego, lub obiekt Date ze swojego JS.

Answer 4

Oto rozwiązanie, które jest pracując dla m e z najnowszymi knockoutjs, opartymi na poniższym łączu i zmodyfikowanymi tak, aby miały niestandardową funkcję init do obsługi aktualizacji właściwości ko.computed w miarę zmiany wartości daty.

Zauważ, że utils.formatDate to tylko funkcja użyteczna do sformatowania daty w dowolnym łańcuchu, który chcesz, więc po prostu zamień go na własny kod formatowania daty, bez względu na to, czy używasz instantjs, czy czegoś innego.

ko.bindingHandlers.date = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {  
     ko.utils.registerEventHandler(element, 'change', function() { 
      var value = valueAccessor(); 

      if (element.value !== null && element.value !== undefined && element.value.length > 0) { 
       value(element.value); 
      } 
      else { 
       value(''); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(value); 

     var output = ''; 
     if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) { 
      output = utils.formatDate(valueUnwrapped); 
     } 

     if ($(element).is('input') === true) { 
      $(element).val(output); 
     } else { 
      $(element).text(output); 
     } 
    } 
}; 

    <div> 
     <label>Date of Birth:</label> 
     <input type="text" data-bind="date: dateOfBirth, format: 'DD MMM YYYY'" /> 
    </div> 

BINDING AND FORMATTING DATES USING KNOCKOUT AND MOMENT JS

Answer 5

Opierając się odpowiedzi Ryana powyżej, działa to trochę ładniejszy z nowszymi ko/chrom widgetów. Usuwa również część czasu w czasie.

ko.bindingHandlers.datePicker = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     // Register change callbacks to update the model 
     // if the control changes. 
     ko.utils.registerEventHandler(element, "change", function() { 
      var value = valueAccessor(); 
      var target_date = element.valueAsDate; 
      var truncated = new Date(target_date.getFullYear(), target_date.getMonth(), target_date.getDate()); 
      value(truncated); 
     }); 
    }, 
    // Update the control whenever the view model changes 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     var unwrapped = ko.utils.unwrapObservable(value()); 
     if(unwrapped === undefined || unwrapped === null) { 
      element.value = ''; 
     } else { 
      element.valueAsDate = unwrapped; 
     } 
    } 
}; 

Answer 6

dzisiejszych czasach jest tak dużo łatwiejsze Moment.js

this.sessionDate = ko.observable(moment().format('YYYY-MM-DD')); 
this.getFormattedDate =() => { return moment(this.sessionDate()'YYYY-MM-DD').format('MM/DD/YYYY') }; // Note this is ES2015 syntax 

w HTML można powiązać go z

<input class="form-control" name="date" type="date" id="date" data-bind="value: sessionDate"> 

i wyświetlić go sformatowany jako

<p data-bind="text : getFormattedDate()">Loading Date</p> 

Nie trzeba tworzyć niestandardowych powiązań, a y możesz użyć podkładki w starszych przeglądarkach.

Answer 7

Ten sam zwyczaj wiązania za pomocą momentJS

ko.bindingHandlers.datePicker = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     // Register change callbacks to update the model 
     // if the control changes. 
     ko.utils.registerEventHandler(element, "change", function() { 
      var value = valueAccessor(); 
      value(moment(element.value).format()); 
     }); 
    }, 
    // Update the control whenever the view model changes 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     element.value = moment(value()).format("YYYY-MM-DD"); 
    } 
}; 

Answer 8

ten pracował dla mnie

ko.bindingHandlers.momentDate = { 
_parseDateTime: function (element, valueAccessor) { 
    var value = valueAccessor(); 
    var valueUnwrapped = ko.utils.unwrapObservable(value); 
    var datetime = moment(valueUnwrapped); 
    var date = moment($(element).val(), 'YYYY-MM-DD'); 
    datetime = datetime.set({ 
     'year': date.get('year'), 
     'month': date.get('month'), 
     'date': date.get('date') 
    }); 
    value(datetime.toDate()); 
}, 
init: function (element, valueAccessor) { 
    function bind() { 
     ko.bindingHandlers.momentDate._parseDateTime(element, valueAccessor); 
    } 
    $(element).change(bind).blur(bind); 
}, 
update: function (element, valueAccessor) { 
    var value = valueAccessor(); 
    var valueUnwrapped = ko.utils.unwrapObservable(value); 
    var date = moment(valueUnwrapped); 
    $(element).val(date.format('YYYY-MM-DD')); 
} 

};

<input type="date" data-bind="momentDate: $data.Date" class="form-control"/>