title: How to add datepicker field like TextField, Label etc. in the .FXML file (JavaFX)
body: <p>I am trying to add datepicker field in .fxml (JavaFX). But I don't what is correct way to do?
  Please help me how to add datepicker field in .fxml file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.lang.*?&gt;
  &lt;?import java.util.*?&gt;
  &lt;?import javafx.collections.*?&gt;
  &lt;?import javafx.scene.*?&gt;
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;AnchorPane id="AnchorPane" prefHeight="705.9998779296875" prefWidth="499.9998779296875" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="processbuilder.controler.NewActivityController"&gt;
    &lt;children&gt;
      &lt;GridPane prefHeight="615.9998779296875" prefWidth="499.9998779296875" AnchorPane.bottomAnchor="90.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
        &lt;children&gt;
          &lt;Label prefHeight="24.0" prefWidth="53.0" text="Name : " GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.rowIndex="0" GridPane.valignment="CENTER" /&gt;
          &lt;Label text="Description :" translateY="30.0" GridPane.columnIndex="0" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP" /&gt;
          &lt;TextField fx:id="name" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="0" /&gt;
          &lt;TextArea fx:id="desc" prefWidth="200.0" wrapText="true" GridPane.columnIndex="1" GridPane.rowIndex="1" /&gt;
          
        &lt;columnConstraints&gt;
          &lt;ColumnConstraints hgrow="SOMETIMES" maxWidth="177.0" minWidth="10.0" prefWidth="76.0" /&gt;
          &lt;ColumnConstraints hgrow="SOMETIMES" maxWidth="394.0" minWidth="10.0" prefWidth="394.0" /&gt;
        &lt;/columnConstraints&gt;
        &lt;rowConstraints&gt;
          &lt;RowConstraints maxHeight="194.0" minHeight="10.0" prefHeight="49.0" vgrow="SOMETIMES" /&gt;
          &lt;RowConstraints maxHeight="317.0" minHeight="10.0" prefHeight="265.0" vgrow="SOMETIMES" /&gt;
          &lt;RowConstraints maxHeight="194.0" minHeight="10.0" prefHeight="42.0" vgrow="SOMETIMES" /&gt;
          &lt;RowConstraints maxHeight="261.0" minHeight="10.0" prefHeight="261.0" vgrow="SOMETIMES" /&gt;
        &lt;/rowConstraints&gt;
      &lt;/GridPane&gt;
      &lt;Button fx:id="create" mnemonicParsing="false" onAction="#handleCreateActivity" prefWidth="64.0" text="Create" AnchorPane.bottomAnchor="30.0" AnchorPane.leftAnchor="345.0" AnchorPane.rightAnchor="91.0" /&gt;
      &lt;Button fx:id="cancel" mnemonicParsing="false" onAction="#handleCancel" prefHeight="20.9998779296875" prefWidth="63.9998779296875" text="Cancel" AnchorPane.bottomAnchor="30.0" AnchorPane.leftAnchor="116.0" AnchorPane.rightAnchor="320.0" /&gt;
      &lt;Button fx:id="modify" layoutX="345.0" layoutY="655.0" mnemonicParsing="false" onAction="#handleModify" prefWidth="63.9998779296875" text="Modify" visible="false" /&gt;
    &lt;/children&gt;
  &lt;/AnchorPane&gt;</code></pre>
  </div>
  </div>
  </p>