Bootstrap Material DatePicker

Documents

Title: Bootstrap Material DatePicker

Description: Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Category: Date

Library: Bootstrap Material DatePicker
Moment.js
jQuery

Include Files

<!-- Add jQuery and Bootstrap Material DatePicker and Moment.js, Google Material Icons Style -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>
<!-- If change language, add language file » https://cdnjs.com/libraries/moment.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/ja.js"></script>

Basic markup


        <script>
            $(function () {
                $('#date').bootstrapMaterialDatePicker({
                    option
                });
            });
            <input type="text" id="date">
        </script>

Attachment Table

Bootstrap Material DatePicker Options

Property	Type	Default	Description
format	String	'YYYY-MM-DD'	MomentJS Format
shortTime	Boolean	false	true => Display 12 hours AM
minDate	String or Date or Moment	''	Minimum selectable date
maxDate	String or Date or Moment	''	Maximum selectable date
currentDate	String or Date or Moment	''	Initial Date
year	Boolean	false	true => Has Yearpicker
date	Boolean	false	true => Has Datepicker
disabledDays	Array	[]	Array containing day indices (1-7) to disable
time	Boolean	false	true => Has Timepicker
clearButton	Boolean	false	true => Show Clear Button
nowButton	Boolean	false	true => Show Now Button
switchOnClick	Boolean	false	true => Switch view on click
cancelText	String	'Cancel'	Text for the cancel button
okText	String	'OK'	Text for the OK button
clearText	String	'Clear'	Text for the Clear button
nowText	String	'Now'	Text for the Now button
triggerEvent	String	'focus'	Event to fire the calendar
monthPicker	Boolean	false	true => Act as monthpicker (hide calendar)

Moment.js Time Format

	Token	Output
Month	M	1 2 ... 11 12
	Mo	1st 2nd ... 11th 12th
	MM	01 02 ... 11 12
	MMM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
Quarter	Q	1 2 3 4
	Qo	1st 2nd 3rd 4th
Day of Month	D	1 2 ... 30 31
	Do	1st 2nd ... 30th 31st
	DD	01 02 ... 30 31
Day of Year	DDD	1 2 ... 364 365
	DDDo	1st 2nd ... 364th 365th
	DDDD	001 002 ... 364 365
Day of Week	d	0 1 ... 5 6
	do	0th 1st ... 5th 6th
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
Day of Week (Locale)	e	0 1 ... 5 6
Day of Week (ISO)	E	1 2 ... 6 7
Week of Year	w	1 2 ... 52 53
	wo	1st 2nd ... 52nd 53rd
	ww	01 02 ... 52 53
Week of Year (ISO)	W	1 2 ... 52 53
	Wo	1st 2nd ... 52nd 53rd
	WW	01 02 ... 52 53
Year	YY	70 71 ... 29 30
	YYYY	1970 1971 ... 2029 2030
	Y	1970 1971 ... 9999 +10000 +10001 Note: This complies with the ISO 8601 standard for dates past the year 9999
Week Year	gg	70 71 ... 29 30
	gggg	1970 1971 ... 2029 2030
Week Year (ISO)	GG	70 71 ... 29 30
	GGGG	1970 1971 ... 2029 2030
AM/PM	A	AM PM
	a	am pm
Hour	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 11 12
	hh	01 02 ... 11 12
	k	1 2 ... 23 24
	kk	01 02 ... 23 24
Minute	m	0 1 ... 58 59
	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
	ss	00 01 ... 58 59
Fractional Second	S	0 1 ... 8 9
	SS	00 01 ... 98 99
	SSS	000 001 ... 998 999
	SSSS ... SSSSSSSSS	000[0..] 001[0..] ... 998[0..] 999[0..]
Time Zone	z or zz	EST CST ... MST PST Note: as of 1.6.0, the z/zz format tokens have been deprecated from plain moment objects. Read more about it here. However, they do work if you are using a specific time zone with the moment-timezone addon.
	Z	-07:00 -06:00 ... +06:00 +07:00
	ZZ	-0700 -0600 ... +0600 +0700
Unix Timestamp	X	1360013296
Unix Millisecond Timestamp	x	1360013296123
Localized formats
Time	LT	8:30 PM
Time with seconds	LTS	8:30:25 PM
Month numeral, day of month, year	L	09/04/1986
	l	9/4/1986
Month name, day of month, year	LL	September 4, 1986
	ll	Sep 4, 1986
Month name, day of month, year, time	LLL	September 4, 1986 8:30 PM
	lll	Sep 4, 1986 8:30 PM
Month name, day of month, day of week, year, time	LLLL	Thursday, September 4, 1986 8:30 PM
	llll	Thu, Sep 4, 1986 8:30 PM

Related: Bootstrap Carousel
It is a standard Carousel of Bootstrap Framework.; Bootstrap Button
It is a standard button design of Bootstrap Framework.; Bootstrap Card
It is a standard Card design of Bootstrap Framework.; Bootstrap Table
It is a standard Table design of Bootstrap Framework.

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and Bootstrap Material DatePicker and Moment.js, Google Material Icons Style -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>
    <!-- If change language, add language file » https://cdnjs.com/libraries/moment.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/ja.js"></script>    
    <title>Bootstrap Material DatePicker</title>
    <style>
        .result{
            display: block;
            box-sizing: border-box;
            width: 100%;
            max-width: 640px;
            margin-right: 20px;
            padding: .5em;
        }
        section.note{
            box-sizing: border-box;
            max-width: 640px;
        }
        [class^='dtp-btn-']{
            font-size: 12px;
            margin: 0 3px;
            padding: .25em .5em;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 3px;
            background: #fff;
        }
        [class^='dtp-btn-']:hover{
            color: #fff;
            background: #8bc34a;
        }
        .dtp-picker-days{
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">Bootstrap Material DatePicker</h1>
        <p class="dlw-description">Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Default Date and Time Picker</h2>
        <p>Pick dates and times in format 'YYYY-MM-DD HH: mm'.</p>
        <script>
            $(function () {
                $('#date-time').bootstrapMaterialDatePicker({
                    format: 'YYYY-MM-DD HH:mm'
                });
            });
        </script>
        <input class="result" type="text" id="date-time" placeholder="Date Picker...">
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Date Only Picker</h2>
        <p>Stop Timepicker with time: false</p>
        <script>
            $(function () {
                $('#date').bootstrapMaterialDatePicker({
                    time: false
                });
            });
        </script>
        <input class="result" type="text" id="date" placeholder="Date Picker...">
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Time Only Picker</h2>
        <p>Stop Datepicker with date: false</p>
        <script>
            $(function () {
                $('#time').bootstrapMaterialDatePicker({
                    date: false,
                    format: 'HH:mm'
                });
            });
        </script>
        <input class="result" type="text" id="time" placeholder="Date Picker...">
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Date Format</h2>
        <p>Confirm the data format with
            <a href="https://designlink.work/momentjs/" target="_blank">Moment.js</a>
        </p>
        <script>
            $(function () {
                $('#format').bootstrapMaterialDatePicker({
                    format: 'LLL'
                });
            });
        </script>
        <input class="result" type="text" id="format" placeholder="Date Picker...">
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] Language</h2>
        <p>Necessary to include the
            <a href="https://cdnjs.com/libraries/moment.js" target="_blank">language js file.</a>
        </p>
        <script>
            $(function () {
                $('#lang').bootstrapMaterialDatePicker({
                    format: 'LLL',
                    nowButton: true,
                    clearButton: true,                    
                    // Include moment.js's language file
                    lang: 'ja',
                    cancelText: 'キャンセル',
                    okText: '決定',
                    clearText: 'クリアー',
                    nowText: '今'
                });
            });
        </script>
        <input class="result" type="text" id="lang" placeholder="Date Picker...">
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] Specify Range</h2>
        <p>Specify the range of the date to be selected.</p>
        <script>
            $(function () {
                var m = moment();
                $('#range').bootstrapMaterialDatePicker({
                    format: 'LLL',
                    // From Today
                    minDate: moment(),
                    // To 10 days
                    maxDate: moment().add(10, 'days')
                });
            });
        </script>
        <input class="result" type="text" id="range" placeholder="Date Picker...">
    </section>
</body>
</html>

Comment

Search

Style Design: Text Style DesignCSS
Here, design samples of various effects to text are posted.; Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.; OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.; HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.; Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout: How to specify a breakpoint and switch imagesJS
Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.; Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.; FlexCSS
Flex is the value of the CSS display property.

Link & Button: Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Button.cssCSS
Button.css is collection of CSS3 button animations.

Card: Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.

Text: Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.; Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media: FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.; YouTube Embed
Introduction of various embedment methods of YouTube.; FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.; xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.; Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.

Date: Moment.jsJS
Moment.js is a javascript that processes and displays date and time.; Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table: MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.; Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan.; Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Form: jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.; Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.; jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.; FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.; slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.; slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox: fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.; fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.; Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.; Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.; Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.; GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.; jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.; metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.; fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.; Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.; Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.; Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; ScrollajQuery
Scrolla is jQuery scroll animation plugin.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.; jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background: fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip: Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.; ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social

Framework: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.; Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Cheat Sheet: HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub; CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine; Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.; GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other: Google Search
On this page you can search for codes collectively.; Design News
It is a news feed about design.