javascript JQuery日期选择器-根据开始日期设置结束日期

xxb16uws  于 2023-02-18  发布在  Java
关注(0)|答案(4)|浏览(156)

使用了两个Jquery日期选取器,StartDate和EndDate

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate">
<input id="EndDate" class="datepicker hasDatepicker" type="text" value="15/02/2015" name="EndDate">

当选择StartDate日期选择器时,我希望EndDate日期选择器为StartDate +1天,并使其不能在EndDate中选择比StartDate中更早的日期。
我有这个代码:

$(function () {
    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: function( selectedDate ) {
            if(this.id == 'StartDate') {
                var minDate = selectedDate + 1;
                $('#to').datepicker("option", "minDate", minDate);

            }
        }
   });
});

因此,它点击了onSelect ok,但随后向日期添加1不起作用(我只得到了结尾为1的日期字符串,即"31/12/20141")。
我还在OnSelect中尝试了以下方法,假设selectedDate是字符串而不是日期类型:

var minDate = new Date(selectedDate);
                var tomorrow = new Date();
                tomorrow.setDate(minDate.getDate() + 1);
                $('#to').datepicker("option", "minDate", tomorrow);

minDate最后变成了一个Invalid Date,明天也一样。我不知道如何从字符串中设置日期。请尝试以下方法:

var minDate = selectedDate.getDate();

获取一个"未捕获的TypeError:undefined不是函数"。
使用JQuery 1.11.1,英国日期格式为日/月/年。

hwamh0ep

hwamh0ep1#

如果要更改另一个添加日期的日期选择器的日期选择器日期,可以执行以下操作:

注意selectedDate的格式为dd/mm/YYYY,这不是在Date构造函数中使用的有效字符串日期格式。然后必须对其进行解析。

var arr = selectedDate.split("/");
        var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]);
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var minDate = new Date(y, m, d + 1);
        $("#EndDate").datepicker('setDate', minDate);

下面是一个工作示例fiddle

q9yhzks0

q9yhzks02#

这里我让用户选择的间隔只有10天。。你可以修改它根据您的要求。

$(document).ready(function() {
    var minDate ;
    var maxDate;
    var mDate
    var j = jQuery.noConflict();
    j( "#startTime" ).datepicker({
    onSelect: function() {
    minDate = j( "#startTime" ).datepicker("getDate");
    var mDate = new Date(minDate.setDate(minDate.getDate()));
    maxDate = new Date(minDate.setDate(minDate.getDate() + 10));
j("#endTime").datepicker("setDate", maxDate);
j( "#endTime" ).datepicker( "option", "minDate", mDate);
j( "#endTime" ).datepicker( "option", "maxDate", maxDate);
}
});
var tdate = new Date();
var ddate = new Date(tdate.setDate(tdate.getDate() + 10));
j("#startTime").datepicker("setDate", new Date());
j( "#endTime" ).datepicker();
j("#endTime").datepicker("setDate",ddate);
  });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div>Please Select Dates:</div>
	 <p>Strat Date:<input id ="startTime" type="text" ></input></p>
	 <p>End Date:<input id ="endTime" type="text" ></input></p>
xiozqbni

xiozqbni3#

您可以使用设置日期获取日期
示例:

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate">
<script>
function convertInputtoDate(){
    var input = document.getElementById("StartDate").value;
    var date = input.split('/');
    var selectdate = new Date(date[2], date[1], date[0]);

    return selectdate;
}
var today = convertInputtoDate();
var tomorrow = new Date(convertInputtoDate());
tomorrow.setDate(today.getDate() + 1);
alert('Today : ' + today + ' Tommorow :' + tomorrow.toLocaleString());
</script>

如果要更改日期格式,请使用:

tomorrow.toLocaleString(); // output will be : d/m/Y H:M:S

要将输入转换为日期:

function convertInputtoDate(){
    var input = document.getElementById("StartDate").value;
    var date = input.split('/');
    var selectdate = new Date(date[2], date[1], date[0]);

    return selectdate;
}
3zwjbxry

3zwjbxry4#

你甚至可以用这个。

$(function() {
  $('#date-range').daterangepicker({
    startDate: moment(),
    endDate: moment(),
    timePicker: true,
    timePicker24Hour: true,
    timePickerIncrement: 15,
    locale: {
      format: 'M/DD/YYYY h:mm A'
    }
  });
});
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- Date Range Picker -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<label for="date-range">Date Range:</label>
<input type="text" id="date-range" name="date-range" />

相关问题