Demo: TimeDropper and DateDropper (horizontal)

demo-timedropper-and-datedropper-horizontal.markdown

Demo: TimeDropper and DateDropper (horizontal)

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

	<!-- ===============================/Search Card========================================================== -->
	<div class="mdl-card mdl-shadow--2dp card__s-v">
		<div class="mdl-card__title">
			<h4 class="mdl-card__title-text">Search Vehcile</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="s-src" pattern="[A-Z,a-z, ]*">
				<label class="mdl-textfield__label" for="s-src">Source</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="s-dest" pattern="[A-Z,a-z, ]*">
				<label class="mdl-textfield__label" for="s-dest">Destination</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="s-date">
				<label class="mdl-textfield__label" for="s-date">Date of Journey</label>
			</div>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="s-time" value="8:00 am">
				<label class="mdl-textfield__label" for="s-time">PickUp Time</label>
			</div>
			
			<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="s-ds">
				<input type="checkbox" id="s-ds" class="mdl-switch__input" checked>
				<span class="mdl-switch__label">Return Journey</span>
			</label>
			

		</div>
		<div class="mdl-card__actions">
			<button id="s-search" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-shadow--2dp">Search</button>
		</div>
	</div>
	<!-- ===============================Search Card/========================================================== -->

script.js

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

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

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

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

		$('#s-time').on('focusout',function(){
			if($(this).val()){
				$(this).parent().addClass('is-dirty');
			}else {
				$(this).parent().removeClass('is-focused');
			}
		});
		/* Time Dropper for PickUp 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 Search card */

	.card__s-v > .mdl-card__supporting-text > .mdl-switch{
		width: auto;
	}

	.card__s-v > .mdl-card__supporting-text > .mdl-textfield{
		width: 21%;
	}

		.card__s-v > .mdl-card__actions{
			position: relative;
			height: 37px;
		}
		.card__s-v > .mdl-card__actions > .mdl-button{
			position: absolute;
			right: 33px;
			top: -21px;
			width: 301px;
		}
		.card__s-v{
			width: 98%;
			margin: auto;
		}
		/* For Search 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" />