Documentation | JavaScript UI

Date Fields

For DATE and TIME controls you can use keyboard to increment by a day (or a minute) if you click up/down arrow keys. You can also use ctr + up/down (command + up/down on mac) to increment by a month (or an hour).

Preview

US Format

Date:

From-To:

(from 10th to 20th of current month)

Blocked Days:

(12,13,14 of current month are blocked)

Date Range:

Time:

From-To:

(from 8:00 am to 4:30 pm)

EU Common Format

Date:

From-To:

(from 10th to 20th of current month)

Blocked Days:

(12,13,14 of current month are blocked)

Date Range:

Time:

From-To:

(from 8:00 am to 4:30 pm)

Code

<div class="block">
    <b>US Format</b>
</div>
<div class="w2ui-field">
    <label>Date:</label>
    <div> <input type="us-date"> </div>
</div>
<div class="w2ui-field">
    <label>From-To:</label>
    <div> <input type="us-dateA"> <span class="legend">(from 10th to 20th of current month)</span> </div>
</div>
<div class="w2ui-field">
    <label>Blocked Days:</label>
    <div> <input type="us-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span> </div>
</div>
<div class="w2ui-field">
    <label>Date Range:</label>
    <div> <input type="us-date1"> - <input type="us-date2"> </div>
</div>
<div class="w2ui-field">
    <label>Time:</label>
    <div> <input type="us-time"> </div>
</div>
<div class="w2ui-field">
    <label>From-To:</label>
    <div> <input type="us-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span> </div>
</div>

<div class="block">
    <b>EU Common Format</b>
</div>
<div class="w2ui-field">
    <label>Date:</label>
    <div> <input type="eu-date"> </div>
</div>
<div class="w2ui-field">
    <label>From-To:</label>
    <div> <input type="eu-dateA"> <span class="legend">(from 10th to 20th of current month)</span> </div>
</div>
<div class="w2ui-field">
    <label>Blocked Days:</label>
    <div> <input type="eu-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span> </div>
</div>
<div class="w2ui-field">
    <label>Date Range:</label>
    <div> <input type="eu-date1"> - <input type="eu-date2"> </div>
</div>
<div class="w2ui-field">
    <label>Time:</label>
    <div> <input type="eu-time"> </div>
</div>
<div class="w2ui-field">
    <label>From-To:</label>
    <div> <input type="eu-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span> </div>
</div>

// US Format
    $('input[type=us-date]').w2field('date');
    $('input[type=us-dateA]').w2field('date', { format: 'm/d/yyyy', start:  month + '/5/' + year, end: month + '/25/' + year });
    $('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/2014',month+'/13/2014',month+'/14/' + year,]});
    $('input[type=us-date1]').w2field('date', { format: 'm/d/yyyy', end: $('input[type=us-date2]') });
    $('input[type=us-date2]').w2field('date', { format: 'm/d/yyyy', start: $('input[type=us-date1]') });
    $('input[type=us-time]').w2field('time',  { format: 'h12' });
    $('input[type=us-timeA]').w2field('time', { format: 'h12', start: '8:00 am', end: '4:30 pm' });

// EU Common Format
    $('input[type=eu-date]').w2field('date',  { format: 'd.m.yyyy' });
    $('input[type=eu-dateA]').w2field('date', { format: 'd.m.yyyy', start:  '5.' + month + '.' + year, end: '25.' + month + '.' + year });
    $('input[type=eu-dateB]').w2field('date', { format: 'd.m.yyyy', blocked: ['12.' + month + '.' + year, '13.' + month + '.' + year, '14.' + month + '.' + year]});
    $('input[type=eu-date1]').w2field('date', { format: 'd.m.yyyy', end: $('input[type=eu-date2]') });
    $('input[type=eu-date2]').w2field('date', { format: 'd.m.yyyy', start: $('input[type=eu-date1]') });
    $('input[type=eu-time]').w2field('time',  { format: 'h24' });
    $('input[type=eu-timeA]').w2field('time', { format: 'h24', start: '8:00 am', end: '4:30 pm' });});
</script>

Options

You can provide various options for numeric fields as second argument. The structure of the options object is below:

Date Fields

Preview

Code

Options

User Comments