{"id":413006,"date":"2023-11-27T09:31:55","date_gmt":"2023-11-27T09:31:55","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=413006"},"modified":"2024-03-13T13:16:42","modified_gmt":"2024-03-13T13:16:42","slug":"how-to-create-a-time-picker-in-hyva-hyva-timepicker","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/","title":{"rendered":"How to create a time picker in Hyva || Hyva Timepicker"},"content":{"rendered":"\n

Hello Readers !!

Today, I am going to drive you through the way of creating a custom time picker for Hyva-compatible Magento 2 extensions<\/a>. Specifically, I created this time picker to make it compatible with the values provided by the Magento 2 default time picker widget. Without further wasting time let’s head over to the code!<\/p>\n\n\n\n

Initialize the “timepicker” component by a div covering your input text field.<\/p>\n\n\n\n

<div x-data="timepicker()">\n    <div class="control">\n        <input type="text"\n         @click="showTimepicker = true;"\n         x-model="timeSelected"\n         name="start_time"\n         id="start_time"\n    <\/div>\n    <!-- Add timepicker html here -->\n<\/div><\/pre>\n\n\n\n
Here is the time picker html which you have to add after the input field, though it has a good clean UI, you are free to make changes.<\/p>\n\n\n\n
<div class="bg-white border-2 rounded-lg shadow p-4"\n    @keydown.escape="closeTimePicker()"\n    @click.away="closeTimePicker()"\n    style="width: 17rem; position: absolute;"\n    x-show.transition="showTimepicker">\n    <div class="mb-4">\n        <div class="flex flex-row justify-center items-center">\n            <div class="flex flex-col items-center mx-2">\n                <svg xmlns="http:\/\/www.w3.org\/2000\/svg"\n                @click="increaseHour" fill="none"\n                viewBox="0 0 24 24"\n                stroke-width="1.5" stroke="currentColor"\n                class="w-6 h-6 opacity-0 hover:opacity-100 \n                transition-all duration-200 ease-[ease] \n                cursor-pointer">\n                    <path stroke-linecap="round"\n                        stroke-linejoin="round" \n                        d="M4.5 15.75l7.5-7.5 7.5 7.5" \/>\n                <\/svg>\n                <svg xmlns="http:\/\/www.w3.org\/2000\/svg"\n                @click="decreaseHour" fill="none"\n                viewBox="0 0 24 24"\n                stroke-width="1.5" stroke="currentColor"\n                class="w-6 h-6 opacity-0 hover:opacity-100 \n                transition-all duration-200 ease-[ease] \n                cursor-pointer">\n                    <path stroke-linecap="round"\n                    stroke-linejoin="round"\n                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" \/>\n                <\/svg>\n            <\/div>\n            <span x-text="hour.padStart(2, '0')"\n            class="text-lg font-bold text-gray-800 mx-2"><\/span>\n            <span class="mx-1 text-lg text-gray-600 font-bold mx-2">\n                 <? =$escaper->escapeHtml(':')?><\/span>\n            <span x-text="minute.padStart(2, '0')"\n            class="text-lg font-bold text-gray-800 mx-2"><\/span>\n            <div class="flex flex-col items-center mx-2">\n                <svg xmlns="http:\/\/www.w3.org\/2000\/svg"\n                @click="increaseMinute" fill="none"\n                viewBox="0 0 24 24"\n                stroke-width="1.5" stroke="currentColor"\n                class="w-6 h-6 opacity-0 hover:opacity-100 \n                transition-all duration-200 ease-[ease]\n                cursor-pointer">\n                    <path stroke-linecap="round"\n                    stroke-linejoin="round"\n                    d="M4.5 15.75l7.5-7.5 7.5 7.5" \/>\n                <\/svg>\n                <svg xmlns="http:\/\/www.w3.org\/2000\/svg"\n                @click="decreaseMinute" fill="none"\n                viewBox="0 0 24 24"\n                stroke-width="1.5"\n                stroke="currentColor"\n                class="w-6 h-6 opacity-0 hover:opacity-100 \n                transition-all duration-200 ease-[ease] \n                cursor-pointer">\n                    <path stroke-linecap="round"\n                    stroke-linejoin="round"\n                    d="M19.5 8.25l-7.5 7.5-7.5-7.5" \/>\n                <\/svg>\n            <\/div>\n        <\/div>\n        <div class="flex flex-row justify-center item-center">\n            <button @click.prevent="period = 'AM'; setTime();"\n            class="bg-slate-200 hover:bg-slate-300 \n            active:bg-slate-500 rounded \n            focus:outline-none focus:ring \n            focus:ring-slate-100 mr-2 p-1">\n               <?=$escaper->escapeHtml('AM')?>\n            <\/button>\n            <button @click.prevent="period = 'PM'; setTime();"\n            class="bg-slate-200 hover:bg-slate-300 \n            active:bg-slate-500 rounded\n            focus:outline-none focus:ring \n            focus:ring-slate-100 ml-2 p-1">\n               <?=$escaper->escapeHtml('PM')?>\n            <\/button>\n        <\/div>\n    <\/div>\n    <div class="flex flex-row justify-between item-center px-4">\n        <button @click.prevent="setCurrenTime"\n        class="btn btn-secondary"><?=$escaper->escapeHtml('NOW')?><\/button>\n        <button @click.prevent="closeTimePicker"\n        class="btn btn-secondary"><?=$escaper->escapeHtml('OK')?><\/button>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
After adding the above HTML content you have to add this script to the page where you want to use the time picker, it is an Alpine Js component for time picker functionalities.<\/p>\n\n\n\n
\n<script>\n    function timepicker(format, timeString)\n    {\n        return {\n            hour: "01",\n            minute: "00",\n            showTimepicker: false,\n            period: "",\n            format: "12h",\n            timeSelected: "",\n            init(){\n                if(format == "12h" && timeString != ""){\n                    let hour = Number(timeString.match(\/^(\\d+)\/)[1]);\n                    let minute = Number(timeString.match(\/:(\\d+)\/)[1]);\n                    let period = timeString.match(\/\\s(.*)$\/)[1];\n                    this.initTime(hour, minute, period, format);\n                }\n            },\n            initTime(hour, minute, period, format){\n                const now = new Date();\n                this.hour = hour ?? now.getHours();\n                this.minute = minute ?? now.getMinutes();\n                this.period = period ?? this.period;\n                this.format = format ?? this.format;\n                let timeObj = this.formatTime(\n                    this.format,\n                    parseInt(this.hour),\n                    parseInt(this.minute),\n                    this.period\n                );\n                this.hour = timeObj?.hour.toString().padStart(2, '0');\n                this.minute = timeObj?.minute.toString().padStart(2, '0');\n                this.period = timeObj?.period.toString().padStart(2, '0');\n                this.setTime();\n            },\n            setTime(timeObj){\n                this.timeSelected = \n                `${this.hour.toString().padStart(2, '0')}:`+\n                `${this.minute.toString().padStart(2, '0')}`+\n                `${this.period}`;\n            },\n            setCurrenTime(){\n                this.initTime(null, null, null, "12h");\n            },\n            increaseHour(){\n                let hour = parseInt(this.hour);\n                if(hour >= 12){\n                    hour = 01;\n                } else {\n                    hour++;\n                }\n                this.hour = hour.toString();\n            },\n            decreaseHour(){\n                let hour = parseInt(this.hour);\n                if(hour <= 1){\n                    hour = 12;\n                } else {\n                    hour--;\n                }\n                this.hour = hour.toString();\n            },\n            increaseMinute(){\n                let minute = parseInt(this.minute);\n                if(minute >= 59){\n                    minute = 00;\n                } else {\n                    minute++;\n                }\n                this.minute = minute.toString();\n            },\n            decreaseMinute(){\n                let minute = parseInt(this.minute);\n                if(minute <= 0){\n                    minute = 59;\n                } else {\n                    minute--;\n                }\n                this.minute = minute.toString();\n            },\n            formatTime(format, hour, min, period){\n                hour = parseInt(hour);\n                min = parseInt(min);\n                if(format == "12h"){\n                    if(hour >= 12){\n                        hour = (hour % 12) || 12;\n                        period = "PM";\n                    }\n                }\n                if(format == "24h"){\n                    if (period == "PM" && hour < 12) hour = hour + 12;\n                    if (period == "AM" && hour == 12) hour = hour - 12;\n                    period = "";\n                }\n                return \n                {hour: hour, minute: min, period: period, format: format};\n            },\n            closeTimePicker(){\n                this.setTime();\n                this.showTimepicker = false;\n            }\n        }\n    }\n<\/script><\/pre>\n\n\n\n
Your time picker will look like this.<\/p>\n\n\n\n
\"timepicker\"<\/figure>\n\n\n\n
That’s it! 

You are good to go for using this time picker and you can make modifications according to your needs.

Hope You Like it!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Readers !! Today, I am going to drive you through the way of creating a custom time picker for Hyva-compatible Magento 2 extensions. Specifically, I created this time picker to make it compatible with the values provided by the Magento 2 default time picker widget. Without further wasting time let’s head over to the […]<\/a><\/p>\n","protected":false},"author":473,"featured_media":413030,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[15187,15186,12664,15182,2056,2070,13578,15185,15184,15183,15181,590],"class_list":["post-413006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-alpinejs","tag-datetimepicker-hyva","tag-hyva","tag-hyva-timepicker","tag-magento","tag-magento2","tag-tailwindcss","tag-time-input-hyva","tag-time-input","tag-time-widget","tag-timepicker","tag-webkul"],"yoast_head":"\nHow to create a time picker in Hyva || Hyva Timepicker - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a time picker in Hyva || Hyva Timepicker - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Hello Readers !! Today, I am going to drive you through the way of creating a custom time picker for Hyva-compatible Magento 2 extensions. Specifically, I created this time picker to make it compatible with the values provided by the Magento 2 default time picker widget. Without further wasting time let’s head over to the [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-27T09:31:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-13T13:16:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mohd. Faizan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohd. Faizan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\"},\"author\":{\"name\":\"Mohd. Faizan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1c942913229700415ddc81738a8d8c80\"},\"headline\":\"How to create a time picker in Hyva || Hyva Timepicker\",\"datePublished\":\"2023-11-27T09:31:55+00:00\",\"dateModified\":\"2024-03-13T13:16:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\"},\"wordCount\":168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png\",\"keywords\":[\"AlpineJs\",\"datetimepicker hyva\",\"hyva\",\"hyva-timepicker\",\"magento\",\"Magento2\",\"TailwindCss\",\"time input hyva\",\"time-input\",\"time-widget\",\"timepicker\",\"webkul\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\",\"name\":\"How to create a time picker in Hyva || Hyva Timepicker - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png\",\"datePublished\":\"2023-11-27T09:31:55+00:00\",\"dateModified\":\"2024-03-13T13:16:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png\",\"width\":1600,\"height\":900,\"caption\":\"Screenshot-from-2023-11-27-13-13-44-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a time picker in Hyva || Hyva Timepicker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1c942913229700415ddc81738a8d8c80\",\"name\":\"Mohd. Faizan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/72aacab989e7eb0f9393bed2de5086bae41b6406e7d5c5f4b4511dcf25d7d420?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/72aacab989e7eb0f9393bed2de5086bae41b6406e7d5c5f4b4511dcf25d7d420?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Mohd. Faizan\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/mohd-faizan900\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a time picker in Hyva || Hyva Timepicker - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/","og_locale":"en_US","og_type":"article","og_title":"How to create a time picker in Hyva || Hyva Timepicker - Webkul Blog","og_description":"Hello Readers !! Today, I am going to drive you through the way of creating a custom time picker for Hyva-compatible Magento 2 extensions. Specifically, I created this time picker to make it compatible with the values provided by the Magento 2 default time picker widget. Without further wasting time let’s head over to the [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-11-27T09:31:55+00:00","article_modified_time":"2024-03-13T13:16:42+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png","type":"image\/png"}],"author":"Mohd. Faizan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Mohd. Faizan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/"},"author":{"name":"Mohd. Faizan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1c942913229700415ddc81738a8d8c80"},"headline":"How to create a time picker in Hyva || Hyva Timepicker","datePublished":"2023-11-27T09:31:55+00:00","dateModified":"2024-03-13T13:16:42+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/"},"wordCount":168,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png","keywords":["AlpineJs","datetimepicker hyva","hyva","hyva-timepicker","magento","Magento2","TailwindCss","time input hyva","time-input","time-widget","timepicker","webkul"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/","url":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/","name":"How to create a time picker in Hyva || Hyva Timepicker - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png","datePublished":"2023-11-27T09:31:55+00:00","dateModified":"2024-03-13T13:16:42+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/Screenshot-from-2023-11-27-13-13-44-1.png","width":1600,"height":900,"caption":"Screenshot-from-2023-11-27-13-13-44-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-time-picker-in-hyva-hyva-timepicker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a time picker in Hyva || Hyva Timepicker"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1c942913229700415ddc81738a8d8c80","name":"Mohd. Faizan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/72aacab989e7eb0f9393bed2de5086bae41b6406e7d5c5f4b4511dcf25d7d420?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72aacab989e7eb0f9393bed2de5086bae41b6406e7d5c5f4b4511dcf25d7d420?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Mohd. Faizan"},"url":"https:\/\/webkul.com\/blog\/author\/mohd-faizan900\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/413006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/473"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=413006"}],"version-history":[{"count":11,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/413006\/revisions"}],"predecessor-version":[{"id":422189,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/413006\/revisions\/422189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/413030"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=413006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=413006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=413006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}