@studyportals/monthpicker

Monthpicker

Studyportals Monthpicker is a Monthpicker input component to be used in Vue.js.

Table of Contents

• Setup & commands
• Including Monthpicker in your project
• Properties
• Events

Setup & commands

The following commands can be used to setup and build the package. Also, we're using jest to run unit tests before a git push is done. This could be by-passed (if absolutely necessary) by running git push --no-verify.

# install dependencies
npm install

# publish the package to npm
npm publish --public true

# build the package for local testing
npm run build

# run linter
npm run lint
npm run lint:fix # with fix

# run unit tests
npm run unit

Including Monthpicker in your project

Monthpicker is a DLL supported component. This means that you should install it's DLL package and then reference the DLL in the build setup of the project that is integrating it.

npm install @studyportals/monthpicker-dll

dllPackages: [
	{
		name: "monthpicker-dll",
		manifest: require("@studyportals/monthpicker-dll/dist/monthpicker.json")
	}
]

When running your project outside of a portal environment you will need to include the monthpicker-dll bundle from our CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@studyportals/monthpicker-dll@version/dist/monthpicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@studyportals/monthpicker-dll@version/dist/monthpicker.min.css">

Then you will be able to import Monthpicker in your component files:

import { Monthpicker } from "@studyportals/monthpicker";

And import Monthpicker styling in your component files:

@import '~@studyportals/monthpicker/dist/style.css';

Properties

Monthpicker has a properties that can be configured to control behaviour.

---

allowPastDates : boolean

Default value: false

---

label : string

Default value: ``

---

defaultMonth : string

Default value: ``

The month value that will be pre-populated in the control.

---

defaultYear : string

Default value: ``

The year value that will be pre-populated in the control.

---

pastYearsRange : number

The maximum number of past years, from the current year, to be included as valid options.

---

futureYearsRange : number

The maximum number of future years, from the current year, to be included as valid options.

---

Events

The Monthpicker component emits the following events:

dateSelected : {year: string, month: string}

dateSelected is emitted when the users selects a valid date, either through text input or through the month select. This event will only be emitted once the user's selection passes validation (both regarding syntax and whether past dates are allowed). Returns an object with a year and month value as strings.