Calendar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Date & Time

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Date/Time
Date/Time without Icon
Initial value
Date/Time with Small Input
Code
  • //With Icon
  • ui left icon input
  • icon today
  • input(type="text")
  • //Without Icon
  • ui input
  • input(type="text")
  • //Small
  • ui small input
  • input(type="text")
  • script
  • $("#calendar").calendar()
Only Value

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Date
Time
24-hour
Year only
Month and year
Code
  • //Date Only
  • script
  • $("#calendar").calendar({
  • type: "date"
  • })
  • //Time Only
  • script
  • $("#calendar").calendar({
  • type: "time"
  • })
  • //24-hour
  • script
  • $("#calendar").calendar({
  • ampm: false,
  • type: "time"
  • })
  • //Year Only
  • script
  • $("#calendar").calendar({
  • type: "year"
  • })
  • //Month and Year
  • script
  • $("#calendar").calendar({
  • type: "month"
  • })
First Selection

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Year first
Day first
Code
  • //Year First
  • script
  • $("#calendar").calendar({
  • startmode: "year"
  • })
  • //Day First
  • script
  • $("#calendar").calendar({
  • monthFirst: "false"
  • })
Custom

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Start
End
Button
Hover me
Custom format
Code
  • //Custom Range
  • script
  • $("#start").calendar({
  • type: "date",
  • endCalendar: $("#end")
  • })
  • $("#end").calendar({
  • type: "date",
  • startCalendar: $("#start")
  • })
  • //Hover
  • script
  • $("#calendar").calendar({
  • on: "hover"
  • })
  • //Custom Format day/month/year
  • script
  • $("#calendar").calendar({
  • monthFirst: false
  • formatter: {
  • date: function (date, settings){
  • if (!date) return ""
  • var day = date.getDate()
  • var month = date.getMonth() + 1
  • var month = date.getMonth() + 1
  • var year = date.getFullYear()
  • return day + "/" + month + "/" + year
  • }
  • }
  • })

© 2017 B3Networks.