Skip to content

Commit

Permalink
datepicker-panel handles single date and format validation
Browse files Browse the repository at this point in the history
  • Loading branch information
Shuwen Qian committed Jul 22, 2016
1 parent dd9d402 commit 3656b25
Show file tree
Hide file tree
Showing 6 changed files with 607 additions and 0 deletions.
348 changes: 348 additions & 0 deletions src/strand-datepicker-panel/doc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,348 @@
{
"name":"strand-datepicker",
"description":"A single and dual (range) date/time picker component including numeric and calendar based inputs",
"attributes": [
{
"name":"useTimezone",
"type":"Boolean",
"description":"When set to true, instructs the component to display a timezone dropdown. Requires configuration data for timezones (see: timezones).",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"use-timezone"
},
{
"name":"useRange",
"type":"Boolean",
"description":"When set to true, instructs the component to display a date range dropdown. Requires configuration data range presets (see: rangePresets).",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"use-range"
},
{
"name":"useTime",
"type":"Boolean",
"description":"When set to true, instructs the component to display inputs for time selection.",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"use-time"
},
{
"name":"useCommit",
"type":"Boolean",
"description":"When set to true, instructs the component to display a footer bar which contains 'save' and 'close' buttons. Requires that the user click 'save' to persist the selection for start and end dates (see: 'start' and 'end').",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"use-commit"
},
{
"name":"useDuration",
"type":"boolean",
"description":"Shows an estimated duration of time between selected start and end dates",
"optional":true,
"default":"true",
"attribute":"use-duration"
},
{
"name":"resetOnClose",
"type":"Boolean",
"description":"When set to true, instructs the component reset when closed. Dependant upon the setting for useCommit, requires that the user click 'save' or the component will be reset to default values when closed.",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"reset-on-close"
},
{
"name":"dual",
"type":"Boolean",
"description":"When set to true, instructs the component to display a start and end calendar panel.",
"optional":true,
"default":"true",
"options":["true", "false"]
},
{
"name":"dateFormat",
"type":"String",
"description":"The moment.js format string used for date formatting. Please note that support for additional formats would require the internal input mask configuration to be edited (see: strand-input-mask).",
"optional":true,
"default":"MM/DD/YYYY",
"options":["MM/DD/YYYY", "DD/MM/YYYY"],
"attribute":"date-format"
},
{
"name":"timeFormat",
"type":"String",
"description":"The moment.js format string used for time formatting. Please note that strand-datepicker currently only supports 12 hour time.",
"optional":true,
"default":"hh:mm a",
"attribute":"time-format"
},
{
"name":"timeOnlyFormat",
"type":"String",
"description":"Returns the moment.js 12 hour time format without meridian value.",
"default":"none",
"attribute":"N/A"
},
{
"name":"rangeValue",
"type":"string",
"description":"Returns the currently selected range value, as defined in range presets (see: rangePresets).",
"optional":true,
"default":"none",
"attribute":"N/A"
},
{
"name":"rangePresets",
"type":"Array",
"description":"Configuration data used to populate the range pressets dropdown. Requires an array of objects which should contain a name, start, and end property. The 'name' property sets the dropdown item's label. The 'start' and 'end' properties require JS Date objects. The supplied 'start' and 'end' dates will set the strand-datepicker's date range.",
"optional":true,
"default":"none",
"attribute":"N/A"
},
{
"name":"rangeDescription",
"type":"String",
"description":"The placeholder string used to populate the range preset dropdown prior to selection.",
"optional":true,
"default":"Select a Predefined Date Range",
"attribute":"range-description"
},
{
"name":"timezoneDescription",
"type":"string",
"description":"The placeholder string used to populate the timezone dropdown prior to selection.",
"default":"Select a Timezone",
"attribute":"timezone-description"
},
{
"name":"timezones",
"type":"Array",
"description":"Configuration data used to populate the timezone dropdown. Requires an array of objects which should contain a name and value property. The 'name' property sets the dropdown item's label. The 'value' property sets the strand-datepicker's timezone.",
"optional":true,
"default":"none",
"attribute":"N/A"
},
{
"name":"start",
"type":"Date",
"description":"The selected start date. In a dual configuration, this is the selected start date. In single configuration, this will be the only date available.",
"default":"none",
"attribute":"N/A"
},
{
"name":"startEnabled",
"type":"Boolean",
"description":"The default value for the start enabled checkbox which appears when startEnabledLabel is specified (see: startEnabledLabel).",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"start-enabled"
},
{
"name":"startUserEnabled",
"type":"Boolean",
"description":"If true, will display a start enabled checkbox, allowing the user to control the start enabled checkbox state.",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"start-user-enabled"
},
{
"name":"allowedStart",
"type":"Date",
"description":"If set, does not allow selection of a date prior to the specified value.",
"optional":true,
"default":"none",
"attribute":"N/A"
},
{
"name":"startLabel",
"type":"String",
"description":"The label text for the blue header which appears in the top left section of the strand-datepicker.",
"optional":true,
"default":"Start",
"attribute":"start-label"
},
{
"name":"startEnabledLabel",
"type":"String",
"description":"If set, instructs the component to display a start enabled checkbox. Typically used when the strand-datepicker needs to be constrained to a particular start date. This also the text which will be displayed next to the checkbox.",
"optional":true,
"default":"none",
"attribute":"start-enabled-label"
},
{
"name":"startDate",
"type":"String",
"description":"A string in the specified dateFormat (see: dateFormat) used to set the strand-datepicker's default start date.",
"optional":true,
"default":"none",
"attribute":"start-date"
},
{
"name":"startTime",
"type":"Date",
"description":"A date object representing the desired default start time, used to set the time input field.",
"default":"12:00",
"attribute":"N/A"
},
{
"name":"startTimePeriod",
"type":"String",
"description":"Sets the value of the meridian dropdown located next to the start time input field.",
"default":"am",
"options":["am", "pm"],
"attribute":"N/A"
},
{
"name":"end",
"type":"Date",
"description":"The selected end date. In a dual configuration, this is the selected end date. In single configuration, this will be the only date available.",
"default":"none",
"attribute":"N/A"
},
{
"name":"endEnabled",
"type":"Boolean",
"description":"The default value for the end enabled checkbox which appears when endEnabledLabel is specified (see: endEnabledLabel).",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"start-enabled"
},
{
"name":"endUserEnabled",
"type":"Boolean",
"description":"If true, will display a end enabled checkbox, allowing the user to control the end enabled checkbox state.",
"optional":true,
"default":"true",
"options":["true", "false"],
"attribute":"end-user-enabled"
},
{
"name":"allowedEnd",
"type":"Date",
"description":"If set, does not allow selection of a date after to the specified value.",
"optional":true,
"default":"none",
"attribute":"N/A"
},
{
"name":"endLabel",
"type":"String",
"description":"The label text for the blue header which appears in the top right section of the strand-datepicker.",
"optional":true,
"default":"End",
"attribute":"end-label"
},
{
"name":"endEnabledLabel",
"type":"String",
"description":"If set, instructs the component to display a end enabled checkbox. Typically used when the strand-datepicker needs to be constrained to a particular end date. This also the text which will be displayed next to the checkbox.",
"optional":true,
"default":"none",
"attribute":"end-enabled-label"
},
{
"name":"endDate",
"type":"String",
"description":"A string in the specified dateFormat (see: dateFormat) used to set the strand-datepicker's default end date.",
"optional":true,
"default":"none",
"attribute":"end-date"
},
{
"name":"endTime",
"type":"Date",
"description":"A date object representing the desired default end time, used to set the time input field.",
"default":"11:59",
"attribute":"N/A"
},
{
"name":"endTimePeriod",
"type":"String",
"description":"Sets the value of the meridian dropdown located next to the end time input field.",
"default":"am",
"options":["am", "pm"],
"attribute":"N/A"
},
{
"name":"timezone",
"type":"String",
"description":"Returns a string representing the selected timezone, as specified in data configuration for timezones (see: timezones)",
"default":"none",
"attribute":"N/A"
},
{
"name":"closeLabel",
"type":"string",
"description":"A string used for text of 'close' link in footer",
"default":"Close"
},
{
"name":"saveLabel",
"type":"string",
"description":"A string used for text of 'save' button in footer",
"default":"Save"
}
],
"methods": [
{
"name":"reset",
"description":"Resets the selected 'start' and 'end' dates either to their default values, or to the values specified in arguments.",
"arguments":[
{
"name":"start",
"type":"Date",
"optional":true,
"default":"null",
"description":"A date object representing the start date (and time) to reset the picker instance to."
},
{
"name":"end",
"type":"Date",
"optional":true,
"default":"null",
"description":"A date object representing the end date (and time) to reset the picker instance to."
}
]
},
{
"name":"save",
"description":"Commits any pending date or date range values selected, and closes the strand-datepicker."
}
],
"events": [
{
"type": "saved",
"detail": [
{
"name":"start",
"type":"Date",
"description":"The start date the user has chosen."
},
{
"name":"end",
"type":"Date",
"description":"The end date the user has chosen."
}
]
}
],
"behaviors": [
"closable",
"autoclosable",
"autotogglable",
"windownotifier",
"stackable",
"positionable",
"positionablepanel",
"debouncable",
"falsifiable",
"refable"
]
}
4 changes: 4 additions & 0 deletions src/strand-datepicker-panel/example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<strand-button id="btn">
<label>Select a Date</label>
</strand-button>
<strand-datepicker id="dp" target="#btn" start-enabled end-enabled use-timezone="false" use-range="false"></strand-datepicker>
42 changes: 42 additions & 0 deletions src/strand-datepicker-panel/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../strand-button/strand-button.html">
<link rel="import" href="../strand-input/strand-input.html">
<link rel="import" href="../strand-input-mask/strand-input-mask.html">
<link rel="import" href="../strand-popover/strand-popover.html">
<link rel="import" href="../strand-dropdown/strand-dropdown.html">
<link rel="import" href="../shared/js/moment.html">
<link rel="import" href="strand-datepicker-panel.html">
<style type="text/css">

body, html {
height: 100%;
min-height: 100%;
}

body {
margin: 0;
padding: 0;
background: #eee;
font-family: sans-serif;
color: #333;
}

#dpb {
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -15px;
}
</style>
</head>
<body>
<template is="dom-bind">
<strand-datepicker-panel label="Date" user-enabled user-enabled-label="Toggle"></strand-datepicker-panel>
<strand-datepicker-panel enabled="false"></strand-datepicker-panel>
</template>
</body>
</html>
Loading

0 comments on commit 3656b25

Please sign in to comment.