Node Packaged Masterfully

    tyer

    1.0.1 • Public • Published

    Tyer

    A Datepicker with multi-modes of date ,range and calendar

    No IE support

    Install

         yarn add tyer
        //or
         npm install tyer

    Use

    See demo here

    See source code here

    
    import Tyer from "tyer";
    //  Date mode (default)
        function onDateValueChange(values /* Array<Date> */) {
            console.log(values);
        }
        const locale = navigator.language
        const dayIntl = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
    	const dateIntl = new Intl.DateTimeFormat(locale, {
    		dateStyle: "medium",
    	});
    	const monthIntl = new Intl.DateTimeFormat(locale, {
    		month: "long",
    		year: mode == 'calendar' ? void 0 : "numeric",
    	});
    	const yearIntl = new Intl.DateTimeFormat(locale, { year: "numeric" });
    	const defaultIntl= {
    		day: (date) => dayIntl.format(date),
    		date: (date) => dateIntl.format(date),
    		month: (date) => monthIntl.format(date),
    		year: (date) => yearIntl.format(date),
    	};
    
    
    const tyer=  new Tyer({
    	el: document.getElementById("date"),
    	mode: "date" // date | range | calendar,
    	onChange: onDateValueChange,
        locale: 'zh-CN' // navigator.language,
        intl:defaultIntl()
    });
    
    
    // Range mode only
    tyer.setRange(new Date(), new Date(2022,3,20))
    
    tyer.setDate(new Date(2022, 3, 14))
    // display full dates list of April
    tyer.setValue(new Date(2022,3,15))
    // highlight Apri 15 2022 on ui
    
    const values=tyer.getValue ()
    //  returns Array<Date>

    Theming

    :root {
    	--tyer-active-color: $your-color;
    	--tyer-active-text-color: $your-color;
    	--tyer-action-color: $your-color;
    	--tyer-action-hover-color: $your-color;
    }

    API

    setDate (date:Date):void

    set date to Tyer instance and render its dates list

    setRange(date1:Date, date2:Date):void

    (range mode) set two date object to Typer instance and render on ui

    setValue(date1:Date,date2:Date,...dateN:Date ):void

    set values to Typer instance and render on ui

    getValue():Date[]

    get all values of Tyer instance

    Keywords

    none

    Install

    npm i tyer

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    99 kB

    Total Files

    8

    Last publish

    Collaborators

    • fizwen