এইচটিএমএল 5 তারিখ চয়নকারীর জন্য কোনও স্টাইল বিকল্প আছে?

Question

আমি সত্যিই এইচটিএমএল 5 তারিখ চয়নকারী সম্পর্কে স্টোকড। এটি জেনে সতেজ হয় যে ডাব্লু 3 সি অবশেষে কিছুটা স্ল্যাক তুলছে তাই আমাদের ইনপুটটির এ জাতীয় সাধারণ রূপটি পুনরায় আবিষ্কার করতে হবে না।

সতর্কবাণীটি হ'ল আমি পিকের কাছে রঙ প্রয়োগ করার পথে খুব বেশি কিছু দেখতে পাই না বা পূর্বাভাস পাই না যা বেশিরভাগ সাইটে ডেটপিকারের ধরণের ডিল-ব্রেকার ব্যবহার করতে চলেছে। <select>সহজ কারণে যে মানুষ এটা প্রশংসনীয় করতে পারবেন না জন্য ব্যাপক জাভাস্ক্রিপ্ট-প্রতিস্থাপন হ্যাক ভুগছেন। আমি আগ্রহী যদি কেউ জানে যে ডাব্লু 3 সি জমিতে কী চলছে?

এটি আরেকটি বৃহত্তর প্রশ্নের সাথে কিছুটা জুড়ে দেওয়া হয়েছে (যদি আপনি উত্তরটি জানেন তবে): ডাব্লু 3 সি বা WHATWG এর সাথে জড়িত হওয়ার চেষ্টা করা কি আমার সময়টির পক্ষে উপযুক্ত যাতে এই বিষয়গুলির কিছুটি দিনের আলো দেখায়? যে কোনও ধরণের অন্তর্দৃষ্টি সহায়ক।

Comments

এটির সহায়তার অভাবের কারণে এটি চেষ্টা করে দেখেনি তবে অনুমান করছি স্টাইলিংটি <select>ইনপুট দিয়ে ন্যূনতম যাচ্ছে ।

— জেমস কোয়েল

আমার বলতে হবে যে ডাব্লু 3 সি ওয়ার্ল্ডে জিনিসগুলি খুব ধীরে ধীরে এগিয়ে যায়। ব্রাউজারগুলি ডেভস / সংস্থাগুলি যেখানে আগ্রহ রয়েছে সেখানে যেতে পছন্দ করবে। তারা (ব্রাউজারগুলি) ডাব্লু 3 সিতে সুনির্দিষ্টভাবে নির্দিষ্ট না করে (এবং সেই দস্তাবেজগুলিতে রান্না করতে সময় লাগে) এমন জিনিসগুলি প্রয়োগ করতে নারাজ। আরও বেশি দ্রুত মানুষ জিনিস অর্জন করতে পারে। সুতরাং, হ্যাঁ, আপনার আগ্রহ থাকলে তাদের মেলিং তালিকায় যোগ দিন এবং জড়িত হওয়া শুরু করুন।

— Lepe

Answer 1

তারিখের ইনপুটটির পাঠ্যবক্সটি কাস্টমাইজ করার জন্য নিম্নলিখিত আটটি সিউডো-উপাদান ওয়েবকিট দ্বারা উপলব্ধ করা হয়েছে:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

সুতরাং আপনি যদি ভাবেন যে তারিখের ইনপুটটি আরও ব্যবধান এবং একটি হাস্যকর রঙের স্কিম ব্যবহার করতে পারে তবে আপনি নিম্নলিখিতটি যুক্ত করতে পারেন:

::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

<input type="date">

Comments

ইনপুট [টাইপ = "তারিখ"] ব্যবহার করে আমার উদ্দেশ্যে কাজ করেছে এবং সম্ভবত এটি অন্য কারও জন্য কাজ করবে।

— ইলোন জিতো

বিভাজক চরিত্র পরিবর্তন করার কোনও উপায় কি কেউ জানেন?

— কিথ আইভিসন

নোট করুন যে আপনি সিউডো-ক্লাসের সাথে ক্লিয়ার বোতামটিও স্টাইল করতে পারবেন::-webkit-clear-button

— গ্যাব্রিয়েল ডুয়ার্টে

@ অ্যান্সেলম টেক্সট বাক্সের ভিতরে ক্লিক করে ডেট পিকারটি খোলার কোনও উপায় আছে কি?

— ভুলে গিয়ে

এই ছদ্ম-শ্রেণীর জন্য উত্স এটি আরও উত্তম উত্তর হিসাবে তৈরি করবে ...

— হেরেটিক বানর

Answer 2

বর্তমানে কোনও নেটিভ ডেট পিকারের স্টাইলিংয়ের কোনও ক্রস ব্রাউজার নেই, স্ক্রিপ্ট-মুক্ত উপায়।

WHATWG / W3C এর অভ্যন্তরে কী চলছে ... যদি এই কার্যকারিতাটি প্রকাশ পায় তবে এটি সম্ভবত CSS-UI স্ট্যান্ডার্ড বা কিছু শেডো ডোম- সম্পর্কিত সম্পর্কিত মানের অধীনে থাকবে। CSS4-ui উইকি পাতা তালিকা কয়েক চেহারা-সম্পর্কিত বিষয় আছে যা সিএসএস 3-ui থেকে বাদ করা হয়েছে, কিন্তু সৎ হতে, সেখানে সিএসএস-ui মডিউল আগ্রহ একটি মহান চুক্তি হবে বলে মনে হচ্ছে না।

আমি মনে করি এখনই ক্রস ব্রাউজার বিকাশের জন্য আপনার সেরা বাজি হ'ল জাভাস্ক্রিপ্ট ভিত্তিক ইন্টারফেসের মাধ্যমে দুর্দান্ত নিয়ন্ত্রণগুলি প্রয়োগ করা, এবং তারপরে HTML5 নেটিভ ইউআই অক্ষম করুন এবং এটি প্রতিস্থাপন করুন। আমি ভাবি ভবিষ্যতে, সম্ভবত আরও ভাল দেশীয় নিয়ন্ত্রণের স্টাইলিং থাকবে তবে সম্ভবত আপনার নিজের শেডো ডম "উইজেট" এর জন্য একটি নেটিভ কন্ট্রোল সরিয়ে নেওয়ার ক্ষমতা সম্ভবত বেশি হবে।

এটি বিরক্তিকর যে এটি উপলভ্য নয় এবং মানক সমর্থনের জন্য আবেদন করা সর্বদা সার্থক। যদিও এটি দেখে মনে হচ্ছে jQuery UI এর নেতৃত্ব চেষ্টা করেছে এবং ব্যর্থ হয়েছিল ।

যদিও এটি খুব হতাশাব্যঞ্জক, এইচটিএমএল 5 তারিখ চয়নকারীর সুবিধাগুলি বিবেচনা করা এবং কাস্টম শৈলীগুলি কেন কঠিন এবং সম্ভবত এড়ানো উচিত। কিছু প্ল্যাটফর্মে, ডেটপিকারটি একেবারেই আলাদা দেখায় এবং আমি ব্যক্তিগতভাবে নেটিভ ডেটপিকারকে স্টাইল করার কোনও জেনেরিক উপায় সম্পর্কে ভাবতে পারি না।

Comments

এবং দেড় বছর পরে, এখনও এটি স্টাইল করার কোনও ক্রস ব্রোজার নেই way তদুপরি, একটি ক্রসব্রোজার তারিখ ইনপুটও নেই! আইই এবং এফএফ এখনও সহযোগিতা করবে না।

— মিস্টার লিস্টার

আমাদের কি আজ আছে?

— aks

Answer 3

এটি জুরবের গিথুবে পাওয়া গেল

আপনি যদি আরও কিছু কাস্টম স্টাইলিং করতে চান তবে। তারিখ উপাদানগুলির ওয়েবকিট রেন্ডারিংয়ের জন্য এখানে সমস্ত ডিফল্ট সিএসএস।

input[type="date"] {
     -webkit-align-items: center;
     display: -webkit-inline-flex;
     font-family: monospace;
     overflow: hidden;
     padding: 0;
     -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}

input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

Comments

ধন্যবাদ, জাস্টিন! মাসগুলি যেতে যেতে বিষয়গুলি সত্যই উজ্জ্বল দেখাচ্ছে। বিশেষত শ্যাডো ডিওএম ক্রোমের ওয়েব ইন্সপেক্টরটিতে আরও সহজে প্রকাশিত হওয়ার সাথে।

— ওয়াই বোলিং

Answer 4

আমি এই সমাধানটিতে আসতে উপরের সমাধানগুলি এবং কিছু পরীক্ষার এবং ত্রুটির সংমিশ্রণ ব্যবহার করেছি। আমাকে বিরক্তিকর সময় নিয়েছে তাই আমি আশা করি এটি ভবিষ্যতে অন্য কাউকে সহায়তা করতে পারে। আমি আরও লক্ষ্য করেছি যে তারিখ পিকার ইনপুটটি সাফারি দ্বারা মোটেই সমর্থিত নয় ...

আমি নীচের ছবিতে প্রদর্শিত স্বচ্ছ তারিখ চয়নকারী ইনপুট রেন্ডার করতে স্টাইলড-উপাদানগুলি ব্যবহার করছি:

const StyledInput = styled.input`
  appearance: none;
  box-sizing: border-box;
  border: 1px solid black;
  background: transparent;
  font-size: 1.5rem;
  padding: 8px;
  ::-webkit-datetime-edit-text { padding: 0 2rem; }
  ::-webkit-datetime-edit-month-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-day-field { text-transform: uppercase; }
  ::-webkit-datetime-edit-year-field { text-transform: uppercase; }
  ::-webkit-inner-spin-button { display: none; }
  ::-webkit-calendar-picker-indicator { background: transparent;}
`

Answer 5

আপনি ইনপুট উপাদানটি স্টাইল করতে নিম্নলিখিত সিএসএস ব্যবহার করতে পারেন।

input[type="date"] {
  background-color: red;
  outline: none;
}

input[type="date"]::-webkit-clear-button {
  font-size: 18px;
  height: 30px;
  position: relative;
}

input[type="date"]::-webkit-inner-spin-button {
  height: 28px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  font-size: 15px;
}

<input type="date" value="From" name="from" placeholder="From" required="" />

Comments

পাঠ্য বাক্সের ভিতরে ক্লিক করে ডেট পিকারটি খোলার কোনও উপায় আছে কি?

— ভুলে গিয়ে

Answer 6

অবগতির জন্য, আমি ক্যালেন্ডার আইকন রঙ যা মত বৈশিষ্ট্য সঙ্গে সম্ভব মনে হয়নি আপডেট করা প্রয়োজন color, fillইত্যাদি

আমি অবশেষে বুঝতে পারি যে কিছু filterবৈশিষ্ট্যগুলি আইকনটি সামঞ্জস্য করবে যাতে আমি এটির কোনও রঙ কীভাবে তৈরি করব তা ভেবে শেষ না করেছিলাম, ভাগ্যক্রমে আমার যা প্রয়োজন ছিল তা তৈরি করা তাই আইকনটি একটি অন্ধকার পটভূমিতে দৃশ্যমান ছিল তাই আমি সক্ষম হয়েছি নিম্নলিখিতটি করুন:

body { background: black; }

input[type="date"] { 
  background: transparent;
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

<body>
 <input type="date" />
</body>

আশা করি এটি কিছু লোককে বেশিরভাগ অংশের ক্রোম হিসাবে সরাসরি সহায়তা করেছে এমনকি সরাসরি বলে দেয় এটি অসম্ভব।

Comments

পাঠ্য বাক্সের ভিতরে ক্লিক করে ডেট পিকারটি খোলার কোনও উপায় আছে কি?

— ভুলে গিয়ে