Demo: DateDropper and TimeDropper (vertical)

demo-datedropper-and-timedropper-vertical.markdown

Demo: DateDropper and TimeDropper (vertical)

Demo presenting use of datedropper and timedropper by felicegattuso.

https://github.com/felicegattuso
https://github.com/felicegattuso/datedropper
https://github.com/felicegattuso/timedropper

A Pen by prashant dawar on CodePen.

License.

demo-datedropper-and-timedropper.markdown

Demo: DateDropper and TimeDropper

Demo presenting use of datedropper and timedropper by felicegattuso.

https://github.com/felicegattuso
https://github.com/felicegattuso/datedropper
https://github.com/felicegattuso/timedropper

A Pen by prashant dawar on CodePen.

License.

index.html

<!-- ===============================/Vechile Profile Card========================================================== -->
	<div class="mdl-card mdl-shadow--2dp card__v-profile">
		<div class="mdl-card__title">
			<h4 class="mdl-card__title-text">Vehicle Profile</h4>
		</div>
		<div class="mdl-card__supporting-text">
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="v-model" pattern="[A-Z,a-z,0-9, ]*">
				<label class="mdl-textfield__label" for="v-model">Model Name</label>
				<span class="mdl-textfield__error">Letters, numbers and spaces only</span>
			</div>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="v-type" pattern="[A-Z,a-z, ]*">
				<label class="mdl-textfield__label" for="v-type">Type</label>
				<span class="mdl-textfield__error">Letters and spaces only</span>
			</div>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="v-capactiy" pattern="[1-7]*">
				<label class="mdl-textfield__label" for="v-capacity">Seating Capacity (1-7)</label>
				<span class="mdl-textfield__error">1 to 7 persons only </span>
			</div>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="v-pch-date" pattern="[0-9]*">
				<label class="mdl-textfield__label" for="v-pch-date">Purchase Date</label>
				<span class="mdl-textfield__error">Number only</span>
			</div>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="v-pch-time" value="8:00 am" pattern="[0-9]*">
				<label class="mdl-textfield__label" for="v-pch-time">Purchase Time</label>
				<span class="mdl-textfield__error">Number only</span>
			</div>
		</div>
		<div class="mdl-card__actions">
			<button id="v-profile-save" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp">Save</button>
		</div>
	</div>
	<!-- ===============================Vechile Profile Card/========================================================== -->

script.js

/*==========/ Date Dropper for Purchase Date */
		$('#v-pch-date').dateDropper();
		$('#v-pch-date').on('click',function(){
			$(this).parent().addClass('is-focused');
		});

		$('#v-pch-date').on('focusout',function(){
			if($(this).val()){
				$(this).parent().addClass('is-dirty');
			}else {
				$(this).parent().removeClass('is-focused');
			}
		});
		/*========== Date Dropper for Purchase Date/===== */

		/*===========/Time Dropper for Purchase Time */
		$('#v-pch-time').timeDropper({
			setCurrentTime: false,
		});

		$('#v-pch-time').on('click',function(){
			$(this).parent().addClass('is-focused');
		});

		$('#v-pch-time').on('focusout',function(){
			if($(this).val()){
				$(this).parent().addClass('is-dirty');
			}else {
				$(this).parent().removeClass('is-focused');
			}
		});
		/* Time Dropper for Purchase Time/================ */

scripts

<script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://felicegattuso.com/projects/datedropper/js/datedropper/datedropper.js"></script>
<script src="http://felicegattuso.com/projects/timedropper/js/timedropper/timedropper.js"></script>

style.css

/* ============/For vehicle profile card */
		.card__v-profile > .mdl-card__actions{
			position: relative;
			height: 37px;
		}
		.card__v-profile > .mdl-card__actions > .mdl-button{
			position: absolute;
			right: 33px;
			top: -21px;
			width: 301px;
		}
		.card__v-profile{
			width: 349px;
		}
		/* For vehicle profile card/============= */

styles

<link href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css" rel="stylesheet" />
<link href="http://felicegattuso.com/projects/datedropper/js/datedropper/datedropper.css" rel="stylesheet" />
<link href="http://felicegattuso.com/projects/timedropper/js/timedropper/timedropper.css" rel="stylesheet" />