jsdk-offical/examples/jsfx/datepicker/datepicker-style.ts

JSDK is the most comprehensive TypeScript framework, like JDK.

/// <reference path="../../../dist/jsdk.d.ts" /> 
JS.imports([
    '$jsfx.datepicker'
]).then(() => {
    new DatePicker({
        id:'txt1',
        placeholder: 'select a date between [2007-08-30, 2019-08-01]',
        defaultViewDate: '2019-01-01',
        minDate: '2007-08-30',
        maxDate: '2019-08-01'
    })
    new DatePicker({
        id:'txt2',
        placeholder: 'autofocus',
        autofocus: true
    })
    new DatePicker({
        id:'txt3',
        placeholder: 'autoclear',
        autoclear: true
    })
    new DatePicker({
        id:'txt4',
        placeholder: 'autoclose',
        autoclose: true
    })
    new DatePicker({
        id:'txt5',
        placeholder: 'picker title + today button + clear button',
        title: 'Select A Date',
        todayBtn:true, 
        clearBtn: true
    })

    new DatePicker({
        id:'fmt1',
        placeholder: 'YY MM DD',
        format: 'YY MM DD'
    })
    new DatePicker({
        id:'fmt2',
        placeholder: 'M/D/YYYY',
        format: 'M/D/YYYY',
        iniValue: '7/1/2019'
    })

    new DatePicker({
        id: 'sta1',
        placeholder: 'readonly',
        title: 'readonly',
        readonly: true,
        format: 'MM/DD/YYYY',
        iniValue: '01/31/2019'
    });
    new DatePicker({
        id: 'sta2',
        placeholder: 'disabled',
        title: 'disabled',
        disabled: true
    });

    let cls = 'fa fa-calendar';
    new DatePicker({
        id: 'sty1',
        faceMode: [LineInputFaceMode.square],
        colorMode: ColorMode.success,
        innerIcon: cls
    });
    new DatePicker({
        id: 'sty2',
        faceMode: [LineInputFaceMode.round, LineInputFaceMode.shadow],
        colorMode: ColorMode.info,
        innerIcon: cls
    });
    new DatePicker({
        id: 'sty3',
        faceMode: [LineInputFaceMode.pill, LineInputFaceMode.shadow],
        colorMode: ColorMode.primary,
        innerIcon: cls
    });
    new DatePicker({
        id: 'sty4',
        faceMode: [LineInputFaceMode.pill, LineInputFaceMode.shadow],
        colorMode: ColorMode.dark,
        leftAddon: 'Your Birthday',
        rightAddon: {
            text: 'SUBMIT',
            colorMode: ColorMode.info
        },
        innerIcon: {cls: cls}
    });
    new DatePicker({
        id: 'sty5',
        faceMode: [LineInputFaceMode.square, LineInputFaceMode.shadow],
        colorMode: ColorMode.dark,
        title: 'Your Birthday',
        rightAddon: {
            text: 'SUBMIT',
            colorMode: ColorMode.info,
            faceMode: ButtonFaceMode.pill
        },
        innerIcon: cls
    });
    new DatePicker({
        id: 'sty6',
        faceMode: [LineInputFaceMode.square, LineInputFaceMode.shadow],
        colorMode: ColorMode.dark,
        title: 'Your Birthday',
        titlePlace: 'top',
        rightAddon: {
            text: 'SUBMIT',
            colorMode: ColorMode.info,
            faceMode: ButtonFaceMode.pill
        },
        innerIcon: cls
    });

    new DatePicker({
        id:'val1',
        title: 'Require(*)',
        autoclose: true,
        autoValidate: true,
        validators: [{
            name: 'required',
            message: 'Must not be Empty!'
        }]
    })

    new DatePicker({
        id:'mul1',
        multidate: 3,
    })

    new DatePicker({
        id:'emb1',
        embedded: true,
        todayHighlight: true
    })
})