Question

我正在使用jQuery日期选择器来显示一个简单的日历，我将突出显示特定的单元格（这部分工作正常）。

但是，我不希望用户能够选择任何单元格，只是选择/突出显示当前日期。

这可能吗？

到目前为止，我有一个http://plnkr.co/edit/zNYoRGDEwPRTJqdkqFX5 ... {/ p>

<!DOCTYPE html>
<html>

  <head>
        <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style type="text/css">
td.highlightViewingDay a {background: #003964 50% 50% repeat-x  !important; color: #fff !important; }
 td.events a {background: #6caddf 50% 50% repeat-x  !important; color: #fff !important; }

    table {
display: table;
border-collapse: separate;
border-spacing: 0px !important;
border-color: gray;
}
.ll-skin-cangas {
    font-size: 90%;
}

.ll-skin-cangas .ui-widget {
    font-family: "Helvetica Neue","Trebuchet MS",Tahoma,Verdana,Arial,sans-serif;

    border-radius: 0;

}

.ll-skin-cangas .ui-datepicker {
    padding: 0;
}

.ll-skin-cangas .ui-datepicker-header {
    border: none;
    color: #fff;
    background-color: #003964;
    border-radius: 0;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjI3Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI3Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);


}

/*.ll-skin-cangas .ui-datepicker-header .ui-state-hover {
    background: #8dc532;
    border-color: transparent;
    cursor: pointer;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}*/

.ll-skin-cangas .ui-datepicker .ui-datepicker-next span,
.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span {
    background-image: url(https://raw.githubusercontent.com/rtsinani/jquery-datepicker-skins/master/css/images/ui-icons_ffffff_256x240.png);
    background-position: -32px -16px;
}

.ll-skin-cangas .ui-datepicker .ui-datepicker-prev span {
    background-position: -96px -16px;
}

.ll-skin-cangas .ui-datepicker table {
    margin: 0;
}

.ll-skin-cangas .ui-datepicker th {
    font-size: 9px;
    color: #fff;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: normal;
    border: none;

    background-color: #a0a0a0;
}

.ll-skin-cangas .ui-datepicker td {
    border: none;
    border-top: 1px solid #e7e9ea;
    border-right: 1px solid #e7e9ea;
    padding: 0;
    background: #fff;
}

.ll-skin-cangas .ui-datepicker tr:first-child td {
    border-top: none;
}

.ll-skin-cangas .ui-datepicker td:last-child  {
    border-right: none;
}

.ll-skin-cangas td .ui-state-default  {
    border: 1px solid transparent;
    text-align: center;
    padding: .7em 0;
    margin:0;
    font-size: 12px;
    font-weight: bold;
    background: #fff;
    color: #6c7173;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);

}

.ll-skin-cangas td.ui-state-disabled .ui-state-default  {
    text-shadow: none;
    opacity: .8;
    color: white;
}

.ll-skin-cangas td .ui-state-active {
    border: 1px solid red;
    background: #fff;
    color: #6c7173;

}





      </style>
    </style>
  </head>

  <body>
    <div id="datepicker" class="datepicker ll-skin-cangas"></div>
  </body>

</html>

// Code goes here

$(document).ready(function() {

  // var dates = ['24/07/2014', '07/07/2014']; //
  var dates = ['2014-07-02', '08/07/2014'];
  var viewingDates = ['2014-07-02 00:00:00', '2014-07-07 00:00:00'];
  var events = ['2014-07-12 00:00:00', '2014-07-13 00:00:00'];
  //tips are optional but good to have
  var tips = ['National Event', 'National Event'];
  var dateToday = new Date();
  $('#datepicker').datepicker({
    dateFormat: 'dd/mm/yy',
    beforeShowDay: highlightDays,
    showOtherMonths: false,
    numberOfMonths: 1,
    firstDay: 1,

    constrainInput: true,
    dayNamesMin: ["S", "M", "T", "W", "T", "F", "S"],
    changeDay: false,
    onSelect: function(selectedDate) {
     return;

    }
  });


  function highlightDays(date) {
   // console.log("date is: " + date);
    for (var i = 0; i < viewingDates.length; i++) {

      if (new Date(viewingDates[i]).toString() == date.toString()) {
        return [true, 'highlightViewingDay', tips[i]];
      }
    }
    for (var i = 0; i < events.length; i++) {

      if (new Date(events[i]).toString() == date.toString()) {
        return [true, 'events', tips[i]];
      }
    }

    return [true, ''];
  }

});

Answer 1

可能有一种内置的方法来实现这一点，但如果不是，你可以简单地用一个绝对定位的空div覆盖calandar：

#holder{
  position:relative;
  overflow:hidden;
}
#holder .coverall{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

<div id="holder">
    <div id="datepicker" class="datepicker ll-skin-cangas"></div>
    <div class="coverall"></div>
</div>

Demo

编辑以允许更改日期，您可以只增加top值以使其不被覆盖：

  top:32px;

New Demo

不允许用户在jquery日期选择器中选择日期

1 个答案: