仅在使用jQuery UI日期选择器满足条件时显示元素

时间:2015-03-01 23:09:44

标签: javascript jquery html datepicker

我是一个相当陌生的JavaScript,并提供了以下代码,从以下几个教程中添加jQuery UI datepickers到我的网站。

但是,我需要做的一件事是 - 如果从datepicker 日期,则到datepicker字段中的日期包含来自禁用日期的任何日期date(scheduledDays)变量,不显示 #request 按钮。此时,请求按钮隐藏在页面加载上,并在填充了日期选择器时显示。

$('#request').show();

希望有意义,如果您需要更多信息,请告诉我。

任何帮助都将不胜感激。

$(document).ready(function() {

var bookedDays = ["2015-2-27","2015-2-28","2010-6-14"];
***Should be results of select from table query. 
e.g SELECT fromdate, todate from table where id = $_GET['id']***


    $('#request').hide();
    $('.days').html('Please select a date range of at least the same day. <br/> <i>Max booking: 2 Months.</i>');
    $( "#from" ).datepicker({
      defaultDate: new Date(),
      changeMonth: true,
      numberOfMonths: 1,
      minDate: new Date(),
      maxDate: "+1M",
      beforeShowDay: isAvailable,
      onClose: function( selectedDate ) {
        var day = $("#from").datepicker('getDate');
day.setDate(day.getDate()+1);
        $( "#to" ).datepicker( "option", "minDate", day );

      }
    });

    $( "#to" ).datepicker({

      defaultDate: new Date(),
      changeMonth: true,
      numberOfMonths: 1,
      minDate: ("#to"),
      maxDate: "+2M",
      beforeShowDay: isAvailable,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });

    function isAvailable(date){
    var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getDate();
    var result = $.inArray( dateAsString, bookedDays ) ===-1 ? [true] : [false];
    return result;
  }


    $('#to').on('change',function(){
     var days = (daydiff(parseDate($('#from').val()), parseDate($('#to').val())));
      var cogs = $('#cogsday').html();
      cogs = cogs.replace(/\D/g,'');
      var x = days;
      var y = cogs * x;
      $('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><br/>');
      if(days){
        $('#request').show();
      }
      $('#request').click(function() {

                var cogs = $('#cogsday').html();

                cogs = cogs.replace(/\D/g,'');

        var x = days ;

        var y = cogs * x;
        $('#total').text(y);
        $('#nameID').val(y);
        $('#days').text(days);
        $('#daysID').val(days);

        });
    })

    function parseDate(str) {
    var mdy = str.split('/')
    return new Date(mdy[2], mdy[0]-1, mdy[1]);
}

function daydiff(first, second) {
    return Math.round((second-first)/(1000*60*60*24));
}

  });

0 个答案:

没有答案