{"id":4968,"date":"2017-08-02T06:06:12","date_gmt":"2017-08-02T06:06:12","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=4968"},"modified":"2019-06-27T08:10:13","modified_gmt":"2019-06-27T08:10:13","slug":"cara-membuat-input-tanggal-dengan-jquery-ui-datepicker","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/","title":{"rendered":"Cara Membuat Input tanggal dengan Jquery UI DatePicker"},"content":{"rendered":"

Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library atau kumpulan kode\/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Sedangkan Jquery UI Datepicker adalah plugin Jquery yang dapat dikonfigurasikan untuk menambahkan fungsi kalender ke halaman web. Untuk menambahkan nya di halaman web kita pertama kita harus mengunduh Jquery UI di halaman http:\/\/Jqueryui.com<\/a> seperti gambar di bawah ini<\/p>\n

\"\"<\/a><\/p>\n

Selanjutnya download versi Jquery yang diinginkan.<\/p>\n

Ketikkan kode berikut, simpan dengan nama datepicker.html :<\/p>\n

<!DOCTYPE html><\/p>\n

<html><\/p>\n

<head><\/p>\n

<title><\/title><\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”jquery-ui-1.12.1.custom\/jquery-ui.css”><\/p>\n

<script src=”jquery-ui-1.12.1.custom\/external\/jquery\/jquery.js”><\/script><\/p>\n

<script src=”jquery-ui-1.12.1.custom\/jquery-ui.js”><\/script><\/p>\n

<script src=”jquery-ui-1.12.1.custom\/jquery-ui.min.js”><\/script><\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”jquery-ui-1.12.1.custom\/jquery-ui.theme.css”><\/p>\n

<script><\/p>\n

$(document).ready(function(){<\/p>\n

$(“#tanggal”).datepicker({<\/p>\n

 <\/p>\n

})<\/p>\n

})<\/p>\n

<\/script><\/p>\n

<\/head><\/p>\n

<body><\/p>\n

Tanggal : <input type=”text” name=”tanggal” id=”tanggal”><!–fungsi id=tanggal untuk memanggil datepicker–><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

 <\/p>\n

Jika berhasil tampilanya akan seperti ini :<\/p>\n

\"\"<\/a><\/p>\n

Selamat mencoba J<\/p>\n

By Sriayu Windarti<\/p>\n","protected":false},"excerpt":{"rendered":"

Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library atau kumpulan kode\/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat<\/p>\n","protected":false},"author":1,"featured_media":4969,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[2011,2012,2014,2013,2015],"class_list":["post-4968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-cara-membuat-input-tanggal-dengan-jquery-ui-datepicker","tag-jquery-adalah-javascrpt-library","tag-jquery-ui-datepicker","tag-kodefungsi-javascript","tag-mengunduh-jquery-ui"],"yoast_head":"\nCara Membuat Input tanggal dengan Jquery UI DatePicker<\/title>\n<meta name=\"description\" content=\"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Input tanggal dengan Jquery UI DatePicker\" \/>\n<meta property=\"og:description\" content=\"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-02T06:06:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-27T08:10:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"131\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Cara Membuat Input tanggal dengan Jquery UI DatePicker\",\"datePublished\":\"2017-08-02T06:06:12+00:00\",\"dateModified\":\"2019-06-27T08:10:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/\"},\"wordCount\":224,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/gambar-jquery-e1501654018944.png\",\"keywords\":[\"Cara Membuat Input tanggal dengan Jquery UI DatePicker\",\"Jquery adalah Javascrpt Library\",\"Jquery UI Datepicker\",\"kode\\\/fungsi Javascript\",\"mengunduh Jquery UI\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/\",\"name\":\"Cara Membuat Input tanggal dengan Jquery UI DatePicker\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/gambar-jquery-e1501654018944.png\",\"datePublished\":\"2017-08-02T06:06:12+00:00\",\"dateModified\":\"2019-06-27T08:10:13+00:00\",\"description\":\"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/gambar-jquery-e1501654018944.png\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/gambar-jquery-e1501654018944.png\",\"width\":300,\"height\":131},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Input tanggal dengan Jquery UI DatePicker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Input tanggal dengan Jquery UI DatePicker","description":"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Input tanggal dengan Jquery UI DatePicker","og_description":"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.","og_url":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/","og_site_name":"WebHozz Blog","article_published_time":"2017-08-02T06:06:12+00:00","article_modified_time":"2019-06-27T08:10:13+00:00","og_image":[{"width":300,"height":131,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Cara Membuat Input tanggal dengan Jquery UI DatePicker","datePublished":"2017-08-02T06:06:12+00:00","dateModified":"2019-06-27T08:10:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/"},"wordCount":224,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png","keywords":["Cara Membuat Input tanggal dengan Jquery UI DatePicker","Jquery adalah Javascrpt Library","Jquery UI Datepicker","kode\/fungsi Javascript","mengunduh Jquery UI"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/","url":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/","name":"Cara Membuat Input tanggal dengan Jquery UI DatePicker","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png","datePublished":"2017-08-02T06:06:12+00:00","dateModified":"2019-06-27T08:10:13+00:00","description":"Cara Membuat Input tanggal dengan Jquery UI DatePicker - Bagi para web developer pasti tidak akan asing dengan Jquery. Jquery adalah Javascrpt Library.","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2017\/08\/gambar-jquery-e1501654018944.png","width":300,"height":131},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/cara-membuat-input-tanggal-dengan-jquery-ui-datepicker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Input tanggal dengan Jquery UI DatePicker"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=4968"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4968\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/4968\/revisions\/4971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/4969"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=4968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=4968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=4968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}