如何使用javascript显示日期差异并禁用旧日期

时间:2014-11-19 14:45:26

标签: javascript datepicker

我的js有问题

我必须找到两天之间的差异,并且还必须禁用过去的日期..

我尝试了很多脚本但是所有脚本都分别具有这些功能..就像过去单独禁用..或日期计算..我需要在我的工作中将两个功能结合在一起。

我尝试了一些js

你可以查看我的js链接

    [http://jsfiddle.net/w5eta8rm/2/][1]

请检查上面的链接..我把两者结合起来......但无法让它起作用..

我不需要提醒功能..我需要在datepicker下面显示为文本。

提前感谢。

2 个答案:

答案 0 :(得分:1)

您可以查看 here in jsfiddle

  • 给出天差并在div中打印到datepicker
  • 结合过去禁用单独和日期计算
  • dateTo在您选择dateFrom
  • 时启用

HTML文件

<form method="post">
    <div height="100px">
    <br/>
    From: <input type="text" name="date_from" id="TxtFromDate" autocomplete="off" />
    To: <input type="text" name="date_to" id="TxtToDate" autocomplete="off" />
    </div>
    <div style="margin-top: 200px;" id="id_days"></div>
</form>

JS档案

$(document).ready(function(){

    $("#TxtFromDate").datepicker({ 
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 1,
        onSelect: function(selected,evnt) {
            var newDate=new Date($('#TxtFromDate').val());
            $("#TxtToDate").datepicker("destroy");
            $("#TxtToDate").datepicker({
                minDate: newDate,
                maxDate: "+60D",
                numberOfMonths: 1,
                onSelect: function(selected,evnt) {
                    var maxdate=new Date($('#TxtToDate').val());
                    var mindate=new Date($('#TxtFromDate').val());
                    var difference_ms=maxdate-mindate;
                    var days = Math.floor(difference_ms/(1000*60*60*24));
                    $('#id_days').empty();
                    $('#id_days').append("Diff date is: " + days).show();
                }
            });
        }
    })
});

答案 1 :(得分:0)

<link rel="stylesheet" href="styles/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="styles/ui.theme.css" type="text/css" media="all" />

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>


<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>

<script type="text/javascript">
$(document).ready(function(){
var $datepicker1 =  $( "#datepicker1" );
var $datepicker2 =  $( "#datepicker2" );

$datepicker1.datepicker({
    minDate: 0,
    maxDate: "+60D",
    numberOfMonths: 1,
    onSelect: function(selected) {
      $("#datepicker2").datepicker("option","minDate", selected)
    }
});

$datepicker2.datepicker({

    onClose: function() {
        var fromDate = $datepicker1.datepicker('getDate');
        var toDate = $datepicker2.datepicker('getDate');
        // date difference in millisec
        var diff = new Date(toDate - fromDate);
        // date difference in days
        var days = diff/1000/60/60/24;

        if (fromDate > toDate) {
            $("#datepicker1").val('');
            $("#datepicker2").val('');
            alert("From Date Is Less Than To Date");
            $('input:text[id$=id_days]').val();
        }
        else {
            $('input:text[id$=id_days]').val(days);
        }  

    }
});
});


<input type="text" name="noof_days" id="id_days" autocomplete="off" class="back"  onkeyup="total()" style="border:none; color:#333;" />