現在、私のpage.htmlは次のとおりです。ほとんどは機能していますが、奇妙な点がいくつかあります。日付は次のように表示されます。
2013-05-24T13:09:40.927 2013-05-24T13:09:40.927 10>
•2013-05-24T13:11:32.823 2013-05-24T13:11:32.823 100>
•2013-05-24T13:12:22.653 2013-05-24T13:12:22.653 10>
•2012-12-12T00:00:00 2012-12-12T00:00:00 10>
それらを日付で解析するのはいいことですが、これを行う方法がわかりません。また、2つの入力フィールドが必要です。
<input type="date" class="ui-corner-all" data-bind="value: newPeriodFrom" />
<input type="date" class="ui-corner-all" data-bind="value: newPeriodTo" />
日付ピッカーまたはより良いマスクされた日付フィールドになるには、どうすれば可能ですか?
page.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>`enter code here`
<script src="Core/Scripts/jquery-2.0.0.js"></script>
<script src="Core/Scripts/jquery-ui-1.10.0.js"></script>
<script src="Scripts/jquery.signalR-1.1.1.min.js"></script>
<script src="signalr/hubs"></script>
<script src="Scripts/knockout-2.2.1.js"></script>
<script src="/Core/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
<link href="GUI/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="GUI/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Core/Scripts/jquery.maskedinput-1.2.2.js"></script>
<!-- when this page is loaded into the dom, the inner html of this div will be re-written to `be the session id, feels hacky but works -->
<div id="sessionIdDiv">174f869f-cf27-4dd4-a031-d518fa5eb9cc</div>
<!-- ReSharper disable StatementIsNotTerminated -->
<script>
$(function () {
//call this func to open a connection before calling hub methods ie window.hubReady.done(function....
// $(function () {
// window.hubReady = $.connection.periodTransactionComs.start();
//// });
//returns the context session ID
function sessionId() {
var licenceGuid = $('#sessionIdDiv').text();
return licenceGuid;
}
//poll the server for updates, gives us "realtime",
//ie any updates directly to SQL or anywhere else will be
//dragged in, helps prevent dirty data my old cache engine caused.
/// $(function() {
// window.setInterval(function() {
// this.hub = $.connection.periodTransactionComs;
// this.hub.server.getAll(sessionId());
//
// }, 1000);
//the main KO view model
function periodViewModel(periodId, validFrom, validTo, number, ownerViewModel) {
this.pId = periodId;
this.validFrom = ko.observable(validFrom);
this.validTo = ko.observable(validTo);
this.number = ko.observable(number);
this.remove = function () { ownerViewModel.removePeriod(this.pId) }
this.notification = function (b) { notify = b }
this.validFrom.subscribe(function (newValue) {
ownerViewModel.updatePeriod(ko.toJS(self));
});
this.validTo.subscribe(function (newValue) {
ownerViewModel.updatePeriod(ko.toJS(self));
});
this.number.subscribe(function (newValue) {
ownerViewModel.updatePeriod(ko.toJS(self));
});
}
//Task List View Model
function periodListViewModel() {
//Handlers for our Hub callbacks
this.hub = $.connection.periodTransactionComs;
this.periods = ko.observableArray([]);
this.newPeriodFrom = ko.observable();
this.newPeriodTo = ko.observable();
this.newPeriodNumber = ko.observable();
var periods = this.periods;
var self = this;
var notify = true;
this.newPeriodFrom();
this.newPeriodTo();
this.newPeriodNumber("1");
//Initializes the view model
this.init = function () {
this.hub.server.getAll(sessionId());
}
//map the JSON to a KO model
this.hub.client.periodAll = function (allPeriods) {
var mappedPeriods = $.map(allPeriods, function (item) {
alert("Mapping id:" + item.Id + " number " + item.number + " Number:" + item.Number + " From: " + item.ValidFrom + " to: " + item.ValidTo);
return new periodViewModel(item.Id, item.ValidFrom, item.ValidTo,
item.Number, self)
});
periods(mappedPeriods);
}
//server dynamicly calls this method when a row is updated in this context
//only returns to caller connected.
this.hub.client.periodUpdated = function (t) {
var period = ko.utils.arrayFilter(periods(),
function (value)
{ return value.pId == t.Id; })[0];
notify = false;
period.validFrom(t.ValidFrom);
period.validTo(t.ValidTo);
period.number(t.Number);
alert("periodupdated: " + t.ValidFrom + " " + t.validTo + " " + t.Number);
notify = true;
};
//all serverside errors will dynamicly calll this to report errors.
this.hub.client.reportError = function (error) {
$("#error").text(error);
$("#error").fadeIn(1000, function () {
$("#error").fadeOut(3000);
alert(error);
});
}
//dynamicly called add method updates clientside viewmodel.
this.hub.client.periodAdded = function (t) {
periods.push(new periodViewModel(t.Id, t.ValidFrom, t.ValidTo, t.Number, self));
alert("Period Added Id:" + t.Id + " number " + t.number + " Number:" + t.Number + " From: " + t.ValidFrom + " to: " + t.ValidTo);
};
//dynamicly called add method updates clientside viewmodel.
this.hub.client.periodRemoved = function (periodId) {
var period = ko.utils.arrayFilter(periods(), function (value) { return value.pId == periodId; })[0];
periods.remove(period);
};
//View Model 'Commands'
//To create a task
this.addPeriod = function () {
var t = { "validFrom": this.newPeriodFrom(), "validTo": this.newPeriodTo(), "number": this.newPeriodNumber() };
alert("values of add " + this.newPeriodFrom() + this.newPeriodTo() + this.newPeriodNumber());
this.hub.server.add(t,sessionId()).done(function () {
alert('added')
}).fail(function (e) {
alert(e);
});
this.newPeriodFrom("");
this.newPeriodTo("");
this.newPeriodNumber("0");
}
//To remove a task client side only
this.removePeriod = function (periodId) {
this.hub.server.remove(periodId);
}
//To update this task client side only
this.updatePeriod = function (period) {
if (notify)
alert('notify');
this.hub.server.update(period);
}
}
var vm = new periodListViewModel();
ko.applyBindings(vm);
// Start the connection
$.connection.hub.start().done(function () { vm.init(); });
ko.bindingHandlers.masked = {
init: function (element, valueAccessor, allBindingsAccessor) {
var mask = allBindingsAccessor().mask || {};
$(element).mask(mask);
ko.utils.registerEventHandler(element, 'focusout', function () {
var observable = valueAccessor();
observable($(element).val());
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).val(value);
}
};
});
</script>
<!-- ReSharper restore StatementIsNotTerminated -->
<h2> Add period</h2>
<form data-bind="submit: addPeriod">
<input type="date" class="ui-corner-all" data-bind="value: newPeriodFrom" />
<input type="date" class="ui-corner-all" data-bind="value: newPeriodTo" />
<input type ="number" class="ui-corner-all" data-bind="value: newPeriodNumber, valueUpdate: 'afterkeydown'" placeholder="Number of period transactions?" />
<input class="ui-button" type="submit" value="Add" />
</form>
<h2>Our periods</h2>
<ul data-bind="template: { name: 'periodTemplate', foreach: periods }, visible: periods().length > 0">
</ul>
<script type="text/html" id="periodTemplate">
<!--Data Template-->
<li>
<span data-bind="text: validFrom"></span>
<span data-bind="text: validTo"></span>
<span data-bind="text: number"></span>>
<input class="ui-button" type="button" href="#" data-bind="click: remove" value="x"/>
</li>
</script>
<div id="error" class="validation-summary-errors"></div>
</body>
</html>
そして私のハブ
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using ProactisSupportPortal;
namespace Core
{
[HubName("periodTransactionComs")]
public class PeriodTransactionHub : Hub
{
public bool Add(LicencePeriodTransaction licencePeriodTransaction, string sessionId)
{
try
{
using (var databaseContext = new LGenEntities())
{
//find the licence where 2session/licence guid
Licence oLicence = databaseContext.Licences.FirstOrDefault(l=>l.session == sessionId); //;
if (oLicence != null)
{
//now add the new licence period transaction
var lpt = new LicencePeriodTransaction
{
Number = licencePeriodTransaction.Number,
ValidFrom = licencePeriodTransaction.ValidFrom,
ValidTo = licencePeriodTransaction.ValidTo,
LicenceID = oLicence.LicenceId,
Licence = oLicence
};
databaseContext.LicencePeriodTransactions.Add(lpt);
databaseContext.Entry(oLicence).State = EntityState.Unchanged;
//commit
databaseContext.SaveChanges();
//notify connected client
Clients.Caller.periodAdded(lpt);
return true;
}
return
Clients.Caller.reportError(
"Null reference in: public bool AddPeriodTransaction(LicencePeriodTransaction licencePeriodTransaction, string sessionId) ");
}
}
catch
(Exception ex)
{
Clients.Caller.reportError(ex);
return false;
}
}
//update
public bool Update(LicencePeriodTransaction updatedPeriod)
{
try
{
using (var databaseContext = new LGenEntities())
{
var oldTask =
databaseContext.LicencePeriodTransactions.FirstOrDefault(p => p.Id == updatedPeriod.Id);
if (oldTask != null)
{
oldTask.Number = updatedPeriod.Number;
oldTask.ValidTo = updatedPeriod.ValidTo;
oldTask.ValidFrom = updatedPeriod.ValidFrom;
databaseContext.SaveChanges();
Clients.Caller.periodUpdated(oldTask);
return true;
}
return false;
}
}
catch (Exception ex)
{
Clients.Caller.reportError(ex);
return false;
}
}
//Remove
public bool Remove(int licencePeriodTransactionId)
{
try
{
using (var databaseContext = new LGenEntities())
{
var licencePeriod =
databaseContext.LicencePeriodTransactions.FirstOrDefault(p => p.Id == licencePeriodTransactionId);
databaseContext.LicencePeriodTransactions.Remove(licencePeriod);
databaseContext.SaveChanges();
Clients.Caller.periodRemoved(licencePeriodTransactionId);
return true;
}
}
catch (Exception ex)
{
Clients.Caller.reportError(ex);
return false;
}
}
//get all for licence by session.
public void GetAll(string sessionId)
{
try
{
using (var databaseContext = new LGenEntities())
{
var res = databaseContext.LicencePeriodTransactions.Where(p => p.Licence.session == sessionId).ToArray();
Clients.Caller.periodAll(res);
}
}
catch (Exception ex)
{
Clients.Caller.reportError(ex);
}
}
}
}