Question

我正在构建一个使用jquery datepicker获取日期进行预订的Web应用程序。尽管日期选择器运行良好，但是当用户在输入字段中手动设置签入/签出日期时，我遇到了问题，因为当发生此类事件时，我无法使用dataepicker的onSelect验证日期。这留下了一些漏洞，其中checkindate可能高于checkoutdate。这是我的签到的HTML代码

<input type="date" class="form-control" id="checkoutdate" name="checkoutdate" placeholder=""/>

这是我选择日期范围的jquery

function checkincheckoutdates(checkin,checkout,feedback)
{
    $('#'+checkout).attr('disabled','disabled');
    $('#'+checkin).datepicker(
    {
        showButtonPanel: true,
        minDate:0,
        onSelect: function(dateText,inst)
        {
            var startdate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
            var nextday = new Date(startdate.getTime()+86400000);
            $("#"+checkout).datepicker("option","minDate",nextday);
            if($("#"+checkout).val().trim() == ''){
                $("#"+checkout).val($.datepicker.formatDate('mm/dd/yy',nextday));//.removeAttr('disabled');
            }
        }
    });
     $("#"+checkout).datepicker(
     {
        onSelect: function(dateText,inst)
        {
            var startdate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
            var prevday = new Date(startdate.getTime()-86400000);
            $("#"+checkin).datepicker( "option", "maxDate",prevday);

    });

所以问题是，如何限制用户仅使用日期选择器输入日期

Answer 1

您可以使用keyup()事件限制用户在日期输入上手动输入日期，如下所示：

$("input[type='date']").on('keyup',function(){
alert("select date using datepicker");
$(this).val("");
});

FIDDLE DEMO

Answer 2

只需在您的签到中添加readonly属性即可。结帐textboxes。这将阻止用户输入任何不需要的值，并且在从数据选择器中选择日期后再次关注日期选择器文本框时也不允许手动编辑日期。这样做：

<input type="date" class="form-control" id="checkoutdate" name="checkoutdate" placeholder="" readonly/>
<input type="date" class="form-control" id="checkindate" name="checkoutdate" placeholder="" readonly/>

除非使用datepicker，否则限制用户更改输入字段的日期

2 个答案: