NFG UI Components

Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.

Full DateTime Picker
Add data-datetimepicker='datetime'

%p
  Full DateTime Picker
  %br
  Add
  %code data-datetimepicker='datetime'

%input{ type: 'text', data: { datetimepicker: 'datetime'  } }


Full DateTime Picker


Add
data-datetimepicker='datetime'


<p>Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.</p>
<div class='mb-3'></div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Full DateTime Picker
      <br>
      Add
      <code>data-datetimepicker='datetime'</code>
    </p>
    <input data-datetimepicker='datetime' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Full DateTime Picker&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='datetime'&#x000A;&#x000A;%input{ type: 'text', data: { datetimepicker: 'datetime'  } }</code></pre>
    <pre><code>
        <p>
          Full DateTime Picker
          <br>
          Add
          <code>data-datetimepicker='datetime'</code>
        </p>
        <input data-datetimepicker='datetime' type='text'>

Date picker only
Add data-datetimepicker='date'

%p
  Date picker only
  %br
  Add
  %code data-datetimepicker='date'
%input{ type: 'text', data: { datetimepicker: 'date' } }


Date picker only


Add
data-datetimepicker='date'


<p>Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.</p>
<div class='mb-3'></div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Full DateTime Picker
      <br>
      Add
      <code>data-datetimepicker='datetime'</code>
    </p>
    <input data-datetimepicker='datetime' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Full DateTime Picker&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='datetime'&#x000A;&#x000A;%input{ type: 'text', data: { datetimepicker: 'datetime'  } }</code></pre>
    <pre><code><p>
Full DateTime Picker
<br>
Add
<code>data-datetimepicker='datetime'</code>
</p>
<input data-datetimepicker='datetime' type='text'>
&lt;p&gt;Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.&lt;/p&gt;
&lt;div class=&#39;mb-3&#39;&gt;&lt;/div&gt;
&lt;div class=&#39;row&#39;&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;p&gt;
      Full DateTime Picker
      &lt;br&gt;
      Add
      &lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
    &lt;/p&gt;
    &lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;
  &lt;/div&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;pre&gt;&lt;code&gt;%p&amp;#x000A;  Full DateTime Picker&amp;#x000A;  %br&amp;#x000A;  Add&amp;#x000A;  %code data-datetimepicker=&#39;datetime&#39;&amp;#x000A;&amp;#x000A;%input{ type: &#39;text&#39;, data: { datetimepicker: &#39;datetime&#39;  } }&lt;/code&gt;&lt;/pre&gt;
    &lt;pre&gt;&lt;code&gt;
        &lt;p&gt;
          Full DateTime Picker
          &lt;br&gt;
          Add
          &lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
        &lt;/p&gt;
        &lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;</code></pre>
  </div>
</div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Date picker only
      <br>
      Add
      <code>data-datetimepicker='date'</code>
    </p>
    <input data-datetimepicker='date' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Date picker only&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='date'&#x000A;%input{ type: 'text', data: { datetimepicker: 'date' } }</code></pre>
    <pre><code>
        <p>
          Date picker only
          <br>
          Add
          <code>data-datetimepicker='date'</code>
        </p>
        <input data-datetimepicker='date' type='text'>

Time picker only
Add data-datetimepicker='time'

%p
  Time picker only
  %br
  Add
  %code data-datetimepicker='time'
%input{ type: 'text', data: { datetimepicker: 'time' } }


Time picker only


Add
data-datetimepicker='time'


<p>Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.</p>
<div class='mb-3'></div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Full DateTime Picker
      <br>
      Add
      <code>data-datetimepicker='datetime'</code>
    </p>
    <input data-datetimepicker='datetime' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Full DateTime Picker&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='datetime'&#x000A;&#x000A;%input{ type: 'text', data: { datetimepicker: 'datetime'  } }</code></pre>
    <pre><code><p>
Full DateTime Picker
<br>
Add
<code>data-datetimepicker='datetime'</code>
</p>
<input data-datetimepicker='datetime' type='text'>
&lt;p&gt;Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.&lt;/p&gt;
&lt;div class=&#39;mb-3&#39;&gt;&lt;/div&gt;
&lt;div class=&#39;row&#39;&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;p&gt;
      Full DateTime Picker
      &lt;br&gt;
      Add
      &lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
    &lt;/p&gt;
    &lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;
  &lt;/div&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;pre&gt;&lt;code&gt;%p&amp;#x000A;  Full DateTime Picker&amp;#x000A;  %br&amp;#x000A;  Add&amp;#x000A;  %code data-datetimepicker=&#39;datetime&#39;&amp;#x000A;&amp;#x000A;%input{ type: &#39;text&#39;, data: { datetimepicker: &#39;datetime&#39;  } }&lt;/code&gt;&lt;/pre&gt;
    &lt;pre&gt;&lt;code&gt;
        &lt;p&gt;
          Full DateTime Picker
          &lt;br&gt;
          Add
          &lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
        &lt;/p&gt;
        &lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;</code></pre>
  </div>
</div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Date picker only
      <br>
      Add
      <code>data-datetimepicker='date'</code>
    </p>
    <input data-datetimepicker='date' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Date picker only&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='date'&#x000A;%input{ type: 'text', data: { datetimepicker: 'date' } }</code></pre>
    <pre><code><p>
Date picker only
<br>
Add
<code>data-datetimepicker='date'</code>
</p>
<input data-datetimepicker='date' type='text'>
&lt;p&gt;Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.&lt;/p&gt;
&lt;div class=&#39;mb-3&#39;&gt;&lt;/div&gt;
&lt;div class=&#39;row&#39;&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;p&gt;
      Full DateTime Picker
      &lt;br&gt;
      Add
      &lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
    &lt;/p&gt;
    &lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;
  &lt;/div&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;pre&gt;&lt;code&gt;%p&amp;#x000A;  Full DateTime Picker&amp;#x000A;  %br&amp;#x000A;  Add&amp;#x000A;  %code data-datetimepicker=&#39;datetime&#39;&amp;#x000A;&amp;#x000A;%input{ type: &#39;text&#39;, data: { datetimepicker: &#39;datetime&#39;  } }&lt;/code&gt;&lt;/pre&gt;
    &lt;pre&gt;&lt;code&gt;&lt;p&gt;
Full DateTime Picker
&lt;br&gt;
Add
&lt;code&gt;data-datetimepicker=&#39;datetime&#39;&lt;/code&gt;
&lt;/p&gt;
&lt;input data-datetimepicker=&#39;datetime&#39; type=&#39;text&#39;&gt;
&amp;lt;p&amp;gt;Unlike in DMS, the nfg_ui version is initialized with a data attribute. This is done to prevent collisions where both the DMS version and the nfg_ui version would interfere.&amp;lt;/p&amp;gt;
&amp;lt;div class=&amp;#39;mb-3&amp;#39;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;#39;row&amp;#39;&amp;gt;
  &amp;lt;div class=&amp;#39;col-md-6&amp;#39;&amp;gt;
    &amp;lt;p&amp;gt;
      Full DateTime Picker
      &amp;lt;br&amp;gt;
      Add
      &amp;lt;code&amp;gt;data-datetimepicker=&amp;#39;datetime&amp;#39;&amp;lt;/code&amp;gt;
    &amp;lt;/p&amp;gt;
    &amp;lt;input data-datetimepicker=&amp;#39;datetime&amp;#39; type=&amp;#39;text&amp;#39;&amp;gt;
  &amp;lt;/div&amp;gt;
  &amp;lt;div class=&amp;#39;col-md-6&amp;#39;&amp;gt;
    &amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;%p&amp;amp;#x000A;  Full DateTime Picker&amp;amp;#x000A;  %br&amp;amp;#x000A;  Add&amp;amp;#x000A;  %code data-datetimepicker=&amp;#39;datetime&amp;#39;&amp;amp;#x000A;&amp;amp;#x000A;%input{ type: &amp;#39;text&amp;#39;, data: { datetimepicker: &amp;#39;datetime&amp;#39;  } }&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;
    &amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;
        &amp;lt;p&amp;gt;
          Full DateTime Picker
          &amp;lt;br&amp;gt;
          Add
          &amp;lt;code&amp;gt;data-datetimepicker=&amp;#39;datetime&amp;#39;&amp;lt;/code&amp;gt;
        &amp;lt;/p&amp;gt;
        &amp;lt;input data-datetimepicker=&amp;#39;datetime&amp;#39; type=&amp;#39;text&amp;#39;&amp;gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#39;row&#39;&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;p&gt;
      Date picker only
      &lt;br&gt;
      Add
      &lt;code&gt;data-datetimepicker=&#39;date&#39;&lt;/code&gt;
    &lt;/p&gt;
    &lt;input data-datetimepicker=&#39;date&#39; type=&#39;text&#39;&gt;
  &lt;/div&gt;
  &lt;div class=&#39;col-md-6&#39;&gt;
    &lt;pre&gt;&lt;code&gt;%p&amp;#x000A;  Date picker only&amp;#x000A;  %br&amp;#x000A;  Add&amp;#x000A;  %code data-datetimepicker=&#39;date&#39;&amp;#x000A;%input{ type: &#39;text&#39;, data: { datetimepicker: &#39;date&#39; } }&lt;/code&gt;&lt;/pre&gt;
    &lt;pre&gt;&lt;code&gt;
        &lt;p&gt;
          Date picker only
          &lt;br&gt;
          Add
          &lt;code&gt;data-datetimepicker=&#39;date&#39;&lt;/code&gt;
        &lt;/p&gt;
        &lt;input data-datetimepicker=&#39;date&#39; type=&#39;text&#39;&gt;</code></pre>
  </div>
</div>
<div class='row'>
  <div class='col-md-6'>
    <p>
      Time picker only
      <br>
      Add
      <code>data-datetimepicker='time'</code>
    </p>
    <input data-datetimepicker='time' type='text'>
  </div>
  <div class='col-md-6'>
    <pre><code>%p&#x000A;  Time picker only&#x000A;  %br&#x000A;  Add&#x000A;  %code data-datetimepicker='time'&#x000A;%input{ type: 'text', data: { datetimepicker: 'time' } }</code></pre>
    <pre><code>
        <p>
          Time picker only
          <br>
          Add
          <code>data-datetimepicker='time'</code>
        </p>
        <input data-datetimepicker='time' type='text'>