Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Datepicker

Output: ____

HTML

<div class="form-group form-group-feedback form-group-feedback-left">
    <input type="text" class="form-control" data-fd-control="datepicker" 
        data-fd-callback="setOutputText" />
    <div class="form-control-feedback"><i class="icon-calendar"></i></div>
</div>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
};

Disable Weekends

Output: ____

HTML

<div class="form-group form-group-feedback form-group-feedback-left">
    <input type="text" class="form-control" data-fd-control="datepicker" 
        data-fd-callback="setOutputText"
        data-fd-disabledays="[1,7]" />
    <div class="form-control-feedback"><i class="icon-calendar"></i></div>
</div>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
};

Custom Formats

There are 3 format-related options:

data-fd-format: The format used for displaying text in the input (pickadate format)
data-fd-formatsubmit: The format used for displaying text in hidden form field (pickadate format)
data-fd-formatmoment: The format used when passing a value to JavaScript (Moment format)

Output: ____

HTML

<div class="form-group form-group-feedback form-group-feedback-left">
    <input type="text" class="form-control" data-fd-control="datepicker" 
        data-fd-callback="setOutputText"
        data-fd-format="mm/dd/yyyy"
        data-fd-formatmoment="ddd, MMM Do, YYYY" />
    <div class="form-control-feedback"><i class="icon-calendar"></i></div>
</div>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
};