date-selector demo

Markup

        <form role="form" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Valid format - MM/DD/YYYY"/>
                        <span class="input-group-addon" data-toggle="date-selector">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    

JavaScript

var $ = require('jquery'),
    moment = require('moment'),
    datepicker = require('date-selector');

$(function () {

    // default options already internally set
    var defaultOptions = {
        RAW_FORMAT: 'YYYY-MM-DD',
        INPUT_FORMATS: ['MM/DD/YYYY'],
        DISPLAY_FORMAT: 'MM/DD/YYYY',
        formatter: function (value) {
            return moment(value, this.RAW_FORMAT, true).format(this.DISPLAY_FORMAT);
        },
        validate: function (value) {
            return moment(value, this.INPUT_FORMATS, true).isValid();
        },
        parser: function (value) {
            return moment(value, this.INPUT_FORMATS, true).format(this.RAW_FORMAT);
        }
    };
    datepicker(defaultOptions);
});