3

我正在尝试解决我遇到的这个问题。我必须输入标签，一个是培训开始日期，另一个是培训结束日期。我想要做的是创建一个 jQuery 函数，该函数将阻止用户选择一个小于开始日期的结束日期，反之亦然。

任何帮助将不胜感激。

<div class="control-group">
    <label class="control-label">Training beggining date:</label>
    <input id="StartDate" style="margin-left: 10px;" size="16" type="text"/>
</div>
<div class="control-group">
    <label class="control-label">Training completion date:</label>
    <input id="EndDate" style="margin-left: 10px;" size="16" type="text"/>
</div>
4

6 回答 6

9 
$(document).ready(function(){
    $("#StartDate").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#EndDate").datepicker("option","minDate", selected)
        }
    });
    $("#EndDate").datepicker({ 
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#StartDate").datepicker("option","maxDate", selected)
        }
    });  
});
于 2018-01-24T12:06:35.263 回答
4

在这里，您对 Jquery UI Datepicker jQuery UI Picking a start and end date within range based on start date和一个工作示例有同样的问题：

html

<input type="text" id="dt1">
<input type="text" id="dt2">

js

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var dt2 = $('#dt2');
            var startDate = $(this).datepicker('getDate');
            var minDate = $(this).datepicker('getDate');
            dt2.datepicker('setDate', minDate);
            startDate.setDate(startDate.getDate() + 30);
            //sets dt2 maxDate to the last day of 30 days window
            dt2.datepicker('option', 'maxDate', startDate);
            dt2.datepicker('option', 'minDate', minDate);
            $(this).datepicker('option', 'minDate', minDate);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy"
    });
});

http://jsfiddle.net/PPSh3/7/

希望有所帮助

于 2013-10-11T12:10:18.440 回答
3

只是扩大融合的答案。此扩展方法使用 jQuery 验证插件工作。它将验证日期和数字

jQuery.validator.addMethod("greaterThan",

函数（值，元素，参数）{

if (!/Invalid|NaN/.test(new Date(value))) {
    return new Date(value) > new Date($(params).val());
}

return isNaN(value) && isNaN($(params).val()) 
    || (Number(value) > Number($(params).val())); 
},'Must be greater than {0}.');

要使用它：

$("#EndDate").rules('add', { greaterThan: "#StartDate" });

或者

$("form").validate({
rules: {
    EndDate: { greaterThan: "#StartDate" }
}
});
于 2013-10-11T12:07:32.647 回答
3

找到了解决方案

var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();
ToEndDate.setDate(ToEndDate.getDate() + 365);

$('.from_date').datepicker({
weekStart: 1,
startDate: '01/01/2012',
endDate: FromEndDate,
autoclose: true
})
.on('changeDate', function (selected) {
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
    });
$('.to_date')
    .datepicker({
        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function (selected) {
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
    });
于 2013-10-15T09:06:37.680 回答
1

日期选择器可以选择验证开始日期和结束日期。

HTML

jQuery

$(document).ready(function() {
    jQuery("#from").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        maxDate: '0',
        onClose: function( selectedDate ) {
        jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    jQuery("#to").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        maxDate: '0',
        onClose: function( selectedDate ) {
        jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});
于 2016-09-01T11:22:30.597 回答
0

JQuery - 结束日期小于开始日期 100% 工作并且也是动态日期。

对于带有今天日期的显示日期

<script type="text/javascript">
$(document).ready(function () {
$('.bet_start').datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    todayHighlight: true,
    startDate: '0d'
});
})</script>

对于结束日期小于开始日期

<script type="text/javascript">
$(document).ready(function () {
$('.bet_start').datepicker({
    autoclose: true,
    format: 'yyyy-mm-dd',
    todayHighlight: true,
    startDate: '0d'
});
var startDate = new Date('18/09/2019');
var FromEndDate = new Date();
var ToEndDate = new Date();
ToEndDate.setDate(ToEndDate.getDate() + 365);

$('.bet_start').datepicker({
    weekStart: 1,
    startDate: '18/09/2019',
    endDate: FromEndDate,
    autoclose: true
})
    .on('changeDate', function (selected) {
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.bet_end').datepicker('setStartDate', startDate);
    });
$('.bet_end')
    .datepicker({
        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function (selected) {
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.bet_start').datepicker('setEndDate', FromEndDate);
    });

});</script>
于 2019-09-18T10:15:54.217 回答