Question

我想使用Angular UI Datepicker让用户选择他们的预订日期并显示它们，哪些日期可用。因此，我必须使用不同的图像来控制每个日期背景的样式。是否可能。

Answer 1

Angularjar UI datepicker日期与图片

angularjs UI datepicker具有文档中给出的有限功能。https://angular-ui.github.io/bootstrap/#/datepicker

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

你的问题很棒。我试图找到插件。但不可用。我在下面给出了一些可以帮助你的链接

http://www.jqueryscript.net/tags.php?/Date%20Picker/

http://angularscript.com/collection/date-picker/

http://jsfiddle.net/reLBD/

http://codecanyon.net/item/booking-calendar-pro-jquery-plugin/full_screen_preview/244645

http://www.webdesignbooth.com/jquery-calendar-and-date-picker-plugins/

http://luisfarzati.github.io/ng-bs-daterangepicker/

http://rawgit.com/jdewit/ez-datetime/master/demo.html

https://github.com/spongessuck/gm.datepickerMultiSelect

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#multidate

Answer 2

截至今天，angular-ui 的 documentation 中有一个很好的示例，展示了如何突出显示单日。他们正在使用 $scope.events 数组将自定义样式应用于单个事件（在这种情况下，他们为明天和后天设置样式）：

var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date(tomorrow);
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
  {
    date: tomorrow,
    status: 'full'
  },
  {
    date: afterTomorrow,
    status: 'partially'
  }
];

status 属性对应于一个 CSS 类，您可以自行定义该类以根据需要设置事件样式：

再举一个例子：

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>

如果您想使用背景图片来突出显示日期，您可以使用 background-image 属性在 CSS 代码中应用它们：

.my-event button {
  background-image: url('/path/to/your/image.png');
}

不过，我不确定日历与图像的外观。您可能需要应用更多属性来调整图像的位置和背景重复。但总的来说，这应该能让您设置如何单独设置日期样式。

Angular UI Datepicker日期样式

2 个答案: