README.md

• Date of birth (date only input)
• Credit card month-year: date only input
• 8Ball range date picker: date only input

"day/month/year"

• formatDate parts
• displayName

Input mask

// griffinClientDate.formatDate({parts: true, style: "yMd"})
var parts = [
  {"type":"month","value":"1"},
  {"type":"literal","value":"/",
  {"type":"day","value":"26"}
  {"type":"literal","value":"/"}
  {"type":"year","value":"2017"}
]

// griffinClientDate.displayNames({style: "yMd", form: "long"})
var displayNames = {
  month: "Month",
  year: "Year",
  day: "Day"
}

parts.map(function(part) {
  	return displayNames[part.type] ? displayNames[part.type] : part.value;
})
// > "Month/Day/Year"

Use cases:

• Input mask
  • placeholder="Month/Day/Year" (mm/dd/yy
• Generate form ([month][day])
  • "Month/Day/Year".split("/")
• Date pickers ()

Generating form

// griffinClientDate.formatDate({parts: true, style: "yMd", form: "long"})
var parts = [
  {"type":"month","value":"1", "displayName":"Month"},
  {"type":"literal","value":"/"},
  {"type":"day","value":"26", "displayName": "Day"}
  {"type":"literal","value":"/"}
  {"type":"year","value":"2017"}
]

// griffinClientDate.displayNames({style: "yMd", form: "long"})
var displayNames = {
  month: "Month",
  year: "Year",
  day: "Day"
}

const dateInputs = ["year", "month", "day"];
const isDateInput = part => dateInputs.indexOf(part.type) !== -1;
let result = griffinClientHandler.formatDate(new Date(2014, 2, 10), {
  style: xxx,
  parts: true
});
let displayNames = griffinClientHandler.displayNames({style: xxx});
...
<form>
  {result
    .filter(isDateInput)
    .map(part => {
      return <label key={part.type}>
        {displayName[part.type]}
        <input name="{part.type}" type="number">
      </label>
    })
  }
</form>
// > <form>
//     <label>Month: <input name="month" type="number"></label>
//     <label>Day: <input name="day" type="number"></label>
//     <label>Year: <input name="year" type="number"></label>
//   </form>

// griffinClientDate.formatDate({parts: true, style: "yMd", includeDisplayName: true})
var parts = [
  {"type":"month","value":"1", asdad},
  {"type":"literal","value":"/",
  {"type":"day","value":"26"}
  {"type":"literal","value":"/"}
  {"type":"year","value":"2017"}
]

// griffinClientDate.displayNames(["month", "year", "day"], {form: "long"})
var displayNames = {
  month: "Month",
  year: "Year",
  day: "Day"
}

griffinClientDate.displayNames(["field/month"])

Intl.DateTimeFormat.

Intl.NumberFormat

[
  {"type":"month","value":"1"},
  {"type":"literal","value":"/",
  {"type":"day","value":"26"}
  {"type":"literal","value":"/"}
  {"type":"year","value":"2017"}
]

const dateInputs = ["year", "month", "day"];
const isDateInput = part => dateInputs.indexOf(part.type) !== -1;
let result = griffinClientHandler.formatDate(new Date(2014, 2, 10), {
  style: xxx,
  parts: true
});
let displayNames = griffinClientHandler.displayNames({style: xxx});
...
<form>
  {result
    .filter(isDateInput)
    .map(part => {
      return <label key={part.type}>
        {displayName[part.type]}
        <input name="{part.type}" type="number">
      </label>
    })
  }
</form>
// > <form>
//     <label>Month: <input name="month" type="number"></label>
//     <label>Day: <input name="day" type="number"></label>
//     <label>Year: <input name="year" type="number"></label>
//   </form>