Cara Memasang Plugin jQuery Datepicker Mobi Pick

Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya dalam pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Memasang Plugin jQuery Datepicker Mobi Pick. Dimana pada plugin ini akan dapat membuat output sebuah tanggal dengan tampilan mobile, biasanya para web designer juga menggunakan plugin jQuery datepicker namun masih tampilan desktop. Nah pada kesempatan kali ini kita akan membuat sebuah datepicker dengan menggunakan plugin ini khusus tampilan mobile.

Teman – teman bisa lihat pada gambar di bawah ini

Dan lihat juga gambar di bawah ini untuk tampilan desktop

Baik, dengan plugin ini kita akan membuat tampilan mobile dan tampilan desktop. Ikuti terus pada artikel kali ini tentang Cara Memasang Plugin jQuery Datepicker Mobi Pick, pertama – tama download terlebih dahulu plugin nya. Klik pada link ini yang saya sediakan kemudian ketikkan script html nya di bawah ini

<!DOCTYPE html> 
<html> 
<head> 
	<title>Cara Memasang Plugin jQuery Datepicker Mobi Pick</title> 
</head>
<body>
	<div id="demo" data-role="page" data-add-back-btn="true" class="ui-body-b>
		<div data-role="content" class="ui-body-b">
			<div class="demo">				
				<input type="text" />
			</div>
	</div>
</div>
</body>
</html>

Save dengan extensi .html kemudian masukkan link pluginnya

        <link rel="shortcut icon" href="demo/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
	<link href="mobipick.css" rel="stylesheet" type="text/css" />
	<link href="shCoreDefault.css" rel="stylesheet" type="text/css" />
	<link href="shThemeDefault.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="shCore.js"></script>
	<script type="text/javascript" src="shBrushJScript.js"></script>
	<script type="text/javascript" src="shBrushXml.js"></script>
	<script type="text/javascript" src="modernizr.custom.min.js"></script>
	<script type="text/javascript" src="xdate.js"></script>
	<script type="text/javascript" src="xdate.i18n.js"></script>
	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
	<script type="text/javascript" src="mobipick.js"></script>

Kemudian tambahkan script jQuery nya untuk mengaktifkan datepicker mobile nya

        <script type="text/javascript">
		$( document ).on( "pagecreate", "#demo", function() {
			SyntaxHighlighter.all();
			var picker = $( "input[type='text']", this );
			picker.mobipick();
			picker.on( "change", function() {
			var date = $( this ).val();
	
			var dateObject = $( this ).mobipick( "option", "date" );
			});
		});
	</script>

Maka datepicker mobile berhasil kita buat, kemudian kita akan buat datepicket untuk desktop nya dengan menggunakan jQuery mobile. Teman – teman ketikkan script di bawah ini

<div id="progressiveenhancementdemo" data-role="page" data-add-back-btn="true" class="ui-body-b">
	<div data-role="content" class="ui-body-b">
		<div class="demo">	
			<input class="mobipick-demo-basic" type="date" />
		</div>
	</div>
</div>

Dan berikan script jQuery nya di bawah ini

      <script type="text/javascript">
		yepnope({
			test: Modernizr.inputtypes.date,
			nope: [
				"xdate.js", 
				"xdate.i18n.js", 
				"mobipick.js", 
				"mobipick-custom.js",
				"obipick.css"
			]
		});

		$( document ).on( "pagecreate", "#progressiveenhancementdemo","#demo", function() {
			SyntaxHighlighter.all();
		});
	</script>

Maka dengan memberikan script di atas ini kedua datepicker berhasil di buat, demikina adalah cara menggunakan plugin dengan jQuery mobile nya. Sekian pada artikel kali ini tentang Cara Memasang Plugin jQuery Datepicker Mobi Pick kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.

Semoga bermanfaat

Cara Memasang Plugin jQuery Datepicker Mobi Pick

Kategori