jQuery 的 datepicker 日期和日期逻辑

Posted 2023-03-14

【中文标题】jQuery 的 datepicker 日期和日期逻辑

【英文标题】：datepicker days and date logic for jquery

【发布时间】：2020-05-22 10:56:57

【问题描述】：

在 from_date 的 on _change 事件中，我想获取输入 days 和 from_date 的值以添加 days 和 from_date 的值并将其设置为 to_date

例如 input_days=5 和 from_date=10/02/2020 它应该在 to_date 中添加并自动显示 15/02/2020....

这是添加 from_date 和 to_date 并显示 total_date 的代码，但是......我应该在这个逻辑中改变什么？

$("#fromdate,#todate").datepicker(
    minDate: 0,
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    dateFormat: 'yy/mm/dd',
);

$("#fromdate").datepicker(dateFormat: 'yy/mm/dd');
$("#todate").datepicker(dateFormat: 'yy/mm/dd');

$('#enddate').change(function () 
    var start = $('#fromdate').datepicker('getDate');
    var end = $('#todate').datepicker('getDate');

    if (start < end) 
        var days = (end - start) / 1000 / 60 / 60 / 24;
        $('#total_days').val(days);
     else 

        alert("cannot select same or previous date!");
        $('#fromdate').val("");
        $('#total_days').val("");
    
);

【参考方案1】：

请参考以下代码。也请在评论中找到小提琴链接。如果输入为空，我默认添加 5 天。

<label class="required">Days</label> <input type="text" id="days"><br/><br/><br/>
<label class="required">from</label>                                                                                                           
<input type="text" id="fromDate" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"><br/><br/><br/>

<label> To </label>                                             
<input type="text" id="toDate" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" >

$(function() 
    $( ".from" ).datepicker(
      onSelect: function( selectedDate ) 
        $( ".to" ).datepicker( "option", "minDate", selectedDate );
        var toDate = $('.from').datepicker('getDate');
        var days = $("#days").val()  != "" ? parseInt($("#days").val()) : 5;
                toDate.setDate(toDate.getDate() + days );
                $('.to').datepicker('setDate', toDate);
      
    );
    $( ".to" ).datepicker(
      onSelect: function( selectedDate ) 
        $( ".from" ).datepicker( "option", "maxDate", selectedDate );
      
    );
  ); 

【讨论】：

上述答案的小提琴链接jsfiddle.net/shivpatne/7g8paL6j

我有另一个 我正在传递 $("#days").val() 而不是 + 5 但这没有给出正确的输出

.val() 给你字符串。您需要将其解析为整数。

我也更新了小提琴和我的代码。您可以在哪里使用输入框提供天数

【参考方案2】：

var val = $("#fromdate").val(); // your input date ID, like we have input: 5
var myDate = new Date($.datepicker.formatDate('yy/mm/dd', new Date($('#fromdate').datepicker('getDate'))));
var d = myDate.getDate()+parseInt(val, 10);
var m =  myDate.getMonth()+1;
var y = myDate.getFullYear();
$("#todate").val(new Date(yy+'/'+mm+'/'+dd));

【讨论】：

这可行，但我只希望 to_date 的值采用 yy/mm/dd 格式，而不是显示 Sat Feb 15 2020 00:00:00 GMT+0530（印度标准时间）跨度>

现在试试，我已经更新了 $("#todate").val(new Date(yy+'/'+mm+'/'+dd));

【参考方案3】：

试试这个

$(document).ready(function()

    $('#txtFromDate').datepicker(
        format: 'dd/mm/yyyy',
        startDate: 'd',
        minDate: new Date('today'),
        language: locale,
        autoclose: true,
        todayHighlight: true
    );
    $('#txtToDate').datepicker(
        format: 'dd/mm/yyyy',
        startDate: '+2d',/change value for to 5 for 5 days
        minDate: '#txtToDate',
        viewMode: 'years',
        language: locale,
        autoclose: true,
    );

【参考方案4】：

希望对你有帮助..

$(document).ready(function() 
    jQuery("#from").datepicker(
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        onClose: function( selectedDate ) 
        jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
        
    );
    jQuery("#to").datepicker(
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        onClose: function( selectedDate ) 
        jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
        
    );
);

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="from">
<input type="text" id="to">

<script  type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>