更新：
这是一个错误，我在github上提出了一个问题。 TBH，该组件尚未真正为主流使用做好准备。
如果一天为13或更大，我的filters将不接受dd / mm / yy格式。大概是因为它会将前两位数字解释为月份，因此拒绝大于12的任何内容。
日历弹出。您可以选择一个日期，它会显示在输入字段中。但是，一旦该领域失去焦点，就将其清除。
我尝试同时使用静态字符串作为mask = df.TYPE.eq('ANNUAL')
cols = ['Running Total(ANNUAL)','Running Total(MONTHLY)']
df.loc[mask,'Running Total(ANNUAL)'] = df.loc[mask,'Amount']
df.loc[~mask,'Running Total(MONTHLY)'] = df.loc[~mask,'Amount']
df[cols] = df[cols].fillna(0)
df[cols] = df.groupby(['Deal'])['Running Total(ANNUAL)','Running Total(MONTHLY)'].transform('cumsum')
print(df)
Deal TYPE Month Amount Running Total(ANNUAL) \
0 A ANNUAL April 1000.00 1000.00
1 A ANNUAL April 2000.00 3000.00
2 A MONTHLY June 1500.00 3000.00
3 B MONTHLY April 11150.00 0.00
4 B ANNUAL July 700.00 700.00
5 B ANNUAL August 303.63 1003.63
6 C ANNUAL April 25624.59 25624.59
7 D ANNUAL June 5000.00 5000.00
8 D ANNUAL July 5000.00 10000.00
9 D ANNUAL August 5000.00 15000.00
10 E ANNUAL April 10.00 10.00
11 E MONTHLY May 1000.00 10.00
12 E ANNUAL May 500.00 510.00
13 E MONTHLY June 500.00 510.00
14 E ANNUAL June 600.00 1110.00
15 E MONTHLY July 300.00 1110.00
16 E MONTHLY July 8200.00 1110.00
Running Total(MONTHLY)
0 0.0
1 0.0
2 1500.0
3 11150.0
4 11150.0
5 11150.0
6 0.0
7 0.0
8 0.0
9 0.0
10 0.0
11 1000.0
12 1000.0
13 1500.0
14 1500.0
15 1800.0
16 10000.0
的值和函数。下面是函数版本。
HTML：
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.geometry.Bounds;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.effect.BlendMode;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class HighlightableTextAreaDemo extends Application {
@Override
public void start(Stage stage) throws Exception {
VBox root = new VBox();
root.setSpacing(10);
root.setPadding(new Insets(10));
Scene sc = new Scene(root, 600, 600);
stage.setScene(sc);
stage.show();
final HighlightableTextArea highlightableTextArea = new HighlightableTextArea();
highlightableTextArea.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
highlightableTextArea.getTextArea().setWrapText(true);
highlightableTextArea.getTextArea().setStyle("-fx-font-size: 20px;");
VBox.setVgrow(highlightableTextArea,Priority.ALWAYS);
Button highlight = new Button("Highlight");
TextField stF = new TextField("40");
TextField enF = new TextField("50");
HBox hb = new HBox(highlight,stF,enF);
hb.setSpacing(10);
highlight.setOnAction(e->{highlightableTextArea.highlight(Integer.parseInt(stF.getText()), Integer.parseInt(enF.getText()));});
Button remove = new Button("Remove Highlight");
remove.setOnAction(e->highlightableTextArea.removeHighlight());
Label lbl = new Label("Resize the window to see if the highlight is moving with text");
lbl.setStyle("-fx-font-size: 17px;-fx-font-style:italic;");
HBox rb = new HBox(remove,lbl);
rb.setSpacing(10);
root.getChildren().addAll(hb,rb,highlightableTextArea);
}
public static void main(String[] args) {
Application.launch(args);
}
/**
* Custom TextArea Component.
*/
class HighlightableTextArea extends StackPane {
final TextArea textArea = new TextArea();
int highlightStartPos = -1;
int highlightEndPos = -1;
boolean highlightInProgress = false;
final Rectangle highlight = new Rectangle();
private StringProperty text = new SimpleStringProperty();
private Group selectionGroup;
public final String getText() {
return text.get();
}
public final void setText(String value) {
text.set(value);
}
public final StringProperty textProperty() {
return text;
}
public HighlightableTextArea() {
highlight.setFill(Color.RED);
highlight.setMouseTransparent(true);
highlight.setBlendMode(BlendMode.DARKEN);
textArea.textProperty().bindBidirectional(text);
getChildren().add(textArea);
setAlignment(Pos.TOP_LEFT);
textArea.widthProperty().addListener((obs, oldVal, newVal) -> {
if (highlightStartPos > -1 && highlightEndPos > -1 && selectionGroup != null) {
highlightInProgress = true;
textArea.selectRange(highlightStartPos, highlightEndPos);
Bounds bounds = selectionGroup.getBoundsInLocal();
updateHightlightBounds(bounds);
}
});
}
private void updateHightlightBounds(Bounds bounds) {
if (bounds.getWidth() > 0) {
if (!getChildren().contains(highlight)) {
getChildren().add(highlight);
}
highlight.setTranslateX(bounds.getMinX() + 1);
highlight.setTranslateY(bounds.getMinY() + 1);
highlight.setWidth(bounds.getWidth());
highlight.setHeight(bounds.getHeight());
Platform.runLater(() -> {
textArea.deselect();
highlightInProgress = false;
});
}
}
public TextArea getTextArea() {
return textArea;
}
@Override
protected void layoutChildren() {
super.layoutChildren();
if (selectionGroup == null) {
final Region content = (Region) lookup(".content");
// Looking for the Group node that is responsible for selection
content.getChildrenUnmodifiable().stream().filter(node -> node instanceof Group).map(node -> (Group) node).filter(grp -> {
boolean notSelectionGroup = grp.getChildren().stream().anyMatch(node -> !(node instanceof Path));
return !notSelectionGroup;
}).findFirst().ifPresent(n -> {
n.boundsInLocalProperty().addListener((obs, old, bil) -> {
if (highlightInProgress) {
updateHightlightBounds(bil);
}
});
selectionGroup = n;
});
}
}
public void highlight(int startPos, int endPos) {
highlightInProgress = true;
highlightStartPos = startPos;
highlightEndPos = endPos;
textArea.selectRange(startPos, endPos);
}
public void removeHighlight() {
textArea.deselect();
getChildren().remove(highlight);
highlightStartPos = -1;
highlightEndPos = -1;
}
}
}
页面底部的脚本：
vuejs-datepicker我的单个文件组件：
format全局注册组件：
<div id="respond_by">
<date-picker name="respond_by"></date-picker>
</div>
我已经测试了Firefox和Chrome，结果相同。
我已经测试了<script>
$(function () {
new Vue({ el: "#respond_by" });
});
</script>
代码沙箱，并且在https://codesandbox.io/s/mpklq49wp上可以正常工作。我通过将以下行添加到格式示例的选项列表中进行了测试：
<template>
<vue-date-picker placeholder="dd/mm/yy"
input-class="form-control"
:name="name"
:format="customDateFormat"
monday-first
typeable></vue-date-picker>
</template>
<script>
import moment from 'moment';
import DatePicker from 'vuejs-datepicker';
export default {
props : [
'name'
],
components: {
'vue-date-picker' : DatePicker
},
methods: {
customDateFormat(date) {
return moment(date).format('DD/MM/YY');
}
}
}
</script>