Question

我在这里使用模板webshim from-to datepicker：

http://jsfiddle.net/trixta/KEfEX/embedded/result,html,js,css/

HTML：

    <form action="#" class="ws-validate">
    <div class="form-row">
        <!-- max of the first date equals value of the second --> <!-- mmin of the second date equals value of the first -->
        <input data-dependent-validation='{"from": "date-to", "prop": "max"}' type="date" id="date-from" placeholder="from" />
        <input data-dependent-validation='{"from": "date-from", "prop": "min"}' type="date" id="date-to" placeholder="to" />
    </div>
    <div class="form-row">
        <input type="submit" />
    </div>
</form>
<p>
    <a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-date.html" target="_blank">date configurator</a>
</p>

的javascript：

webshim.setOptions('forms', {
    lazyCustomMessages: true,
    addValidators: true
});
webshim.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'date',
    date: {
        startView: 2,
        size: 2,
        classes: 'hide-spinbtns'
    }
});

//start polyfilling
webshim.polyfill('forms forms-ext');

//initial max/min attributes should be done serverside.
$(function(){
    $('#date-from, #date-to').prop('min', function(){
        return new Date().toJSON().split('T')[0];
    });
});

我对其维护方式进行了一些结构性修改，但总而言之，它与示例非常相似。我对此实现的问题是用户能够手动编辑datepicker文本框中的信息（如果单击该链接，则可以看到该信息）。如果用户从防止错误输入的框中选择两个日期，则实现工作很好，但如果用户决定输入他们自己的数字，他们可以输入他们想要的任何内容，并且表单不进行错误检查。表单阻止用户手动输入的唯一输入是结束日期早于开始日期，即使这里日期必须正确格式化，以便进行错误检查。理想和最简单的修复方法是使文本框不被用户使用。我试过了

contenteditable="false"

但它似乎对datepicker没有影响。我对javascript和html很新，所以我还不确定所有的细节，所以任何帮助都会非常感激。

如果与手头的问题有任何关联，我正在使用asp.net MVC。

如何让用户无法编辑webshim日期选择器？

0 个答案: