使用Knockout.js,如何将Date属性绑定到HTML5日期选择器?

wa7juj8i  于 2022-11-10  发布在  HTML5
关注(0)|答案(9)|浏览(208)
  • (目前这只在Chrome中有效,因为大多数浏览器还没有为输入type=“date”实现日期选择器)*

在下面的示例中,MyDate开始时是一个Date对象,包含当前日期,但日期输入(预期其格式为YYYY/MM/DD格式的字符串)没有获取该日期。
在选取器中选取日期后,MyDate将变为上述格式的字符串。
如何绑定它以使MyDate保持javascript Date并由输入控件正确解释?
请参阅请参阅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>
wsewodh2

wsewodh21#

虽然@amakhrov答案将工作(甚至会更好,如果使用可写的计算可观察像sujested由@Stijn),我决定这样做使用Custom Bindings
这样做的主要优点是可重用性-只要我想绑定它,我就必须使用data-bind="datePicker : MyDate"。我还可以修改input元素的其他属性,所以如果绑定到复杂的jQuery(和其他)控件,这可能会非常有用。

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);

请参阅http://jsfiddle.net/LLkC4/5/

velaa5lx

velaa5lx2#

您可以在模型中为日期对象使用计算变量:
在html中:

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

在代码中:

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)

请观看演示:http://jsfiddle.net/gcAXB/1/

tkclm6bt

tkclm6bt3#

这里有一个解决方案,是为我工作的最新knockoutjs,基于以下链接,并修改了一个自定义init函数,以处理更新ko.computed属性,因为您的日期值的变化。
请注意,utils.formatDate只是一个实用程序函数,用于将日期格式化为您想要的任何字符串,因此,无论您使用momentjs还是其他方法,都只需将其替换为您自己的日期格式化代码即可。

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

rfbsl7qr

rfbsl7qr4#

现在有了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

在html中,您可以将它与

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

并将其格式显示为

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

不需要创建自定义绑定,并且可以为旧版浏览器使用shim。

1dkrff03

1dkrff035#

this custom binding相同,但使用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");
    }
};
ipakzgxi

ipakzgxi6#

根据Ryan上面的回答,这在更新的ko/chrome小部件上效果更好,它还去掉了日期的时间部分。

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;
        }
    }
};
u4vypkhs

u4vypkhs7#

HTML 5 - Input type date formatting on iOS开始
有两种格式可供选择:

  • 显示格式
  • 公开给JavaScript并发送到服务器的内部格式

您不能更改显示格式。由浏览器决定如何向用户显示日期(实际上由系统的区域设置决定)。
您也不能更改内部格式。无论浏览器/区域设置如何,它始终是ISO 8601。
你必须用特定的格式预先填充它,你可以添加一个计算的可观察对象,把它解析成一个Date对象,这样你就可以在应用程序的其他地方读取它。
如果您还想从JS写入它,您可以设置一个writeable computed observable并解析输入,看看它是来自输入字段的字符串,还是来自JS的Date对象。

slsn1g29

slsn1g298#

这对我很有效

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"/>
ioekq8ef

ioekq8ef9#

这可能有点晚了,但它可能会帮助一些人。我正在使用LuxonDateTime对象来轻松管理我的应用程序中的日期和时区。这适用于DateTime对象:

ko.bindingHandlers.dateTime = {
  // Register change callbacks to update the model if the control changes.
  init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    ko.utils.registerEventHandler(element, 'change', function () {
      const value = valueAccessor()
      const datetime = DateTime.fromFormat(element.value, 'yyyy-MM-dd')
      value(datetime)
    })
  },
  // Update the control whenever the view model changes
  update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    const value = valueAccessor()
    element.value = ko.unwrap(value).toFormat('yyyy-MM-dd')
  }
}

用法:

// viewmodel
const today = DateTime.fromFormat(DateTime.now().toFormat('yyyy-MM-dd'), 'yyyy-MM-dd')
this.date = ko.observable(today)

// template
<input type="date" data-bind="dateTime: date">

相关问题