ইনপুট টাইপ = "তারিখ" ফর্ম্যাট পরিবর্তন করার কোনও উপায় আছে কি?

765

আমি আমার ওয়েবপৃষ্ঠায় এইচটিএমএল 5 উপাদানগুলির সাথে কাজ করছি। ডিফল্ট ইনপুট type="date"হিসাবে তারিখ দেখায় YYYY-MM-DD।

প্রশ্ন হল, এটা ভালো কিছু তার বিন্যাস পরিবর্তন করা সম্ভব হল: DD-MM-YYYY?

html  css  date  input 
— তুরাল আলী
সূত্র
4
গুগল ক্রোমের জন্য একটি FAQ তৈরি করেছে: developers.google.com/web/updates/2012/08/… সুতরাং ফর্ম্যাটটি ওএসের স্থানীয় সেটিংয়ের উপর ভিত্তি করে।
— এন্ডি তেজহোনো
আমি এটি তৈরি করার চেষ্টা করে আমার সময় নষ্ট করি dd/mm/yyyy। মুহুর্ত বা jQuery ডেটপিকারের মতো কেবলমাত্র অন্য লাইব্রেরি ব্যবহার করুন
— আলী আল আমাইন

উত্তর:

608

ফর্ম্যাটটি পরিবর্তন করা অসম্ভব

আমাদের ওভার ওভার ফর্ম্যাট এবং ব্রাউজারের উপস্থাপনা বিন্যাসের মধ্যে পার্থক্য করতে হবে।

তারের ফর্ম্যাট

HTML5 এর তারিখ ইনপুট স্পেসিফিকেশন বোঝায় বোঝায় যা RFC 3339 স্পেসিফিকেশন , যা একটি পূর্ণ-ডেট ফর্ম্যাটে সমান নির্দিষ্ট করে: yyyy-mm-dd। আরও তথ্যের জন্য আরএফসি 3339 নির্দিষ্টকরণের বিভাগ 5.6 দেখুন section

এই ফর্ম্যাটটি valueএইচটিএমএল বৈশিষ্ট্য এবং ডোম বৈশিষ্ট্য দ্বারা ব্যবহৃত হয় এবং সাধারণ ফর্ম জমা দেওয়ার সময় এটিই ব্যবহৃত হয়।

উপস্থাপনা বিন্যাস

ব্রাউজারগুলি কীভাবে একটি তারিখের ইনপুট উপস্থাপন করে তা সীমিত নয়। ক্রোম লেখার সময় এজ, ফায়ারফক্স এবং অপেরার তারিখ সমর্থন রয়েছে ( এখানে দেখুন )। তারা সকলেই একটি তারিখ চয়নকারী প্রদর্শন করে এবং ইনপুট ক্ষেত্রে পাঠ্যটি ফর্ম্যাট করে।

ডেস্কটপ ডিভাইস

ক্রোম, ফায়ারফক্স এবং অপেরার জন্য, ইনপুট ক্ষেত্রের পাঠ্যের বিন্যাসটি ব্রাউজারের ভাষা সেটিং এর উপর ভিত্তি করে। এজের জন্য, এটি উইন্ডোজ ভাষা সেটিং এর উপর ভিত্তি করে। দুঃখের বিষয়, সমস্ত ওয়েব ব্রাউজার অপারেটিং সিস্টেমে কনফিগার করা তারিখের ফর্ম্যাটিং উপেক্ষা করে। আমার কাছে এটি খুব অদ্ভুত আচরণ এবং এই ইনপুট প্রকারটি ব্যবহার করার সময় বিবেচনা করার মতো কিছু। উদাহরণস্বরূপ, ডাচ ব্যবহারকারীরা তাদের অপারেটিং সিস্টেম বা ব্রাউজারের ভাষা সেট আছে যে en-usদেখানো হবে 01/30/2019ফর্ম্যাটে তাদের অভ্যস্ত পরিবর্তে: 30-01-2019।

ইন্টারনেট এক্সপ্লোরার 9, 10 এবং 11 তারের ফর্ম্যাট সহ একটি পাঠ্য ইনপুট ক্ষেত্র প্রদর্শন করে।

মোবাইল ডিভাইস

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

— ডেভিড ওয়ালশটস
সূত্র
আমি জেএস টাইমস্ট্যাম্পের জন্য আশা করতাম, তারের ফর্ম্যাটটি নয়। এবং উপস্থাপনা বিন্যাস পরিবর্তন করার একটি উপায়, এটি সামঞ্জস্য করা বেশ শক্ত।
— অ্যালান কিমার জেনসেন
7
@ অ্যালানকিমার জেনসেন যদিও আমি আপনার চিন্তাভাবনা বুঝতে পেরেছি। আমি বিশ্বাস করি যে আরএফসি 3339 এ উল্লিখিত ফর্ম্যাটটি ব্যবহারের সিদ্ধান্তটি সঠিক, কারণ এটি এইচটিএমএল এবং জাভাস্ক্রিপ্টের মধ্যে সংযোগ তৈরি করে না। আপনার দ্বিতীয় বিষয় হিসাবে, আমি অনুভব করেছি যে ব্যবহারের দৃষ্টিকোণ থেকে, ব্যবহারকারীর পক্ষে তার আঞ্চলিক পছন্দ অনুযায়ী ক্যালেন্ডারটি বোঝা উচিত।
— ডেভিড ওয়ালশকস
10
অ্যাপটি যদি পিটি_বিআর হয় তবে আমি একটি পিটি_বিআর ইনপুট আশা করি। আমার সিস্টেম সেটিংস কিছু যায় আসে না। এইচটিএমএল 5 লোকেল প্রয়োগ করার জন্য কিছু উপায় প্রয়োজন।
— আইরিশিলভিও
5
আমি স্পেনের ভিত্তিতে থাকায় তারিখের / মুদ্রার সেটিংসের জন্য আমি স্প্যানিশ লোকাল ব্যবহার করি, তবুও আমার প্রথম ভাষাটি ইংরেজি এবং আমি ইউএসএ কীবোর্ড বিন্যাসে অভ্যস্ত তাই আমি ইংরেজি / ইউএসএ কীবোর্ড ব্যবহার করি। আমার গ্রাহকরা ফরাসী ভাষী ইউরোপীয় .... আমি ইউএসএ এমএম-ডিডি-ইয়াই ফর্ম্যাটে তারিখগুলি প্রদর্শন বন্ধ করার জন্য ক্রোম ইত্যাদির প্রতি ইঙ্গিত দিতে পারতাম!
— লুক এইচ
6
কি একটি অকেজো উপাদান, যারা এই চশমা সঙ্গে আসে?
— বোহ
143

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

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

আপনি পলিমারের জন্য ডেটটাইম-ইনপুট এর মতো একটি সাধারণ (এবং কার্যকারী) সমাধান দিয়ে শুরু করতে পারেন যা আপনাকে এটির মতো একটি ট্যাগ ব্যবহার করতে দেয়:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

অথবা আপনি সৃজনশীল হতে হবে এবং পপ-আপ সম্পূর্ণ তারিখ-পিকার্স করতে স্টাইল হিসাবে আপনি ইচ্ছুক বিন্যাস এবং লোকেল আপনি ইচ্ছা, callbacks, এবং বিকল্প আপনার দীর্ঘ তালিকা সঙ্গে, (আপনি আপনার নিষ্পত্তি একটি সম্পূর্ণ কাস্টম এপিআই পেয়েছেন!)

স্ট্যান্ডার্ডস-কমপ্লায়েন্ট, কোনও হ্যাক নেই।

উপলভ্য পলফিলগুলি , কী ব্রাউজারগুলি / সংস্করণগুলি তারা সমর্থন করে তা ডাবল-চেক করুন এবং যদি এটি আপনার ব্যবহারকারীর বেসের যথেষ্ট% কভার করে ... এটি 2018, সুতরাং সম্ভবত এটি সম্ভবত আপনার বেশিরভাগ ব্যবহারকারীদের কভার করবে।

আশা করি এটা সাহায্য করবে!

— joseldn
সূত্র
কিন্তু এই স্থানীয়করণের কেউ কি? অর্থাত্ মাসের নামগুলি অ-ইংরাজীতে পরিবর্তন করুন। এবং তারা ডেস্কটপ এবং মোবাইল কাজ করে?
— স্যাম হাসলার
অবশ্যই, তারা স্থানীয়করণযোগ্য। আপনি সিস্টেমের লোকাল (যেমন: is.gd/QSkwAY ) এর সুবিধা নিতে পারবেন বা ওয়েব আইকোম্পোনেন্টের (যেমন: is.gd/Ru9U82 ) ভিতরে আপনার আই 18 টি ফাইল সরবরাহ করতে পারেন । মোবাইল ব্রাউজারগুলির হিসাবে, তারা পলিফিলগুলি ব্যবহার করে সমর্থিত, যদিও এটি 100% নয় (এখনও)… আমি পোস্ট করা ব্রাউজারগুলি / সংস্করণগুলির লিঙ্কটি পরীক্ষা করুন। আবার, এটি প্রান্তরে রক্তপাত করছে। আপনি যদি সামনের দিকে তাকিয়ে থাকেন তবে এটি একটি দুর্দান্ত সমাধান।
— জোসেল্ডন
দুঃখিত, আমি আপনার সর্বশেষ মন্তব্য দেখতে পাইনি। এটি: jcrowther.io/2015/05/11/i18n- এবং-web- কম্পোনেন্টগুলি বেশ দরকারী বলে মনে হচ্ছে এবং উত্তরে অন্তর্ভুক্ত করা উচিত।
— স্যাম হাসলার
আপনি এটি দরকারী বলে খুশি। উত্তরটি সব কিছু দিয়ে আপডেট করব।
— জোসেল্ডন
@ এসডুড দেখে মনে হচ্ছে যে লিঙ্কগুলি আপনাকে নির্দেশ করেছে যেগুলি আপনাকে অন্তর্ভুক্ত করার উপযুক্ত বলে মনে করেছিল সেগুলি এখনও অন্তর্ভুক্ত নেই।
— মার্ক আমেরিকান
79

পূর্বে উল্লিখিত হিসাবে আনুষ্ঠানিকভাবে ফর্ম্যাট পরিবর্তন সম্ভব নয়। তবে ক্ষেত্রটি স্টাইল করা সম্ভব, সুতরাং (সামান্য জেএস সহায়তায়) এটি আমাদের ইচ্ছামত ফর্ম্যাটে তারিখটি প্রদর্শন করে। তারিখের ইনপুটটি সামলানোর কয়েকটি সম্ভাবনা এইভাবে হারিয়ে যায়, তবে যদি বিন্যাসকে চাপ দেওয়ার ইচ্ছা বেশি হয় তবে এই সমাধানটি কোনও উপায় হতে পারে। একটি তারিখের ক্ষেত্রগুলি কেবল এর মতোই থাকে:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

বাকিটি কিছুটা সিএসএস এবং জেএস: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")
input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
স্নিপেট প্রসারিত করুন

এটি ডেস্কটপের জন্য ক্রোম এবং আইওএসে সাফারিতে দুর্দান্তভাবে কাজ করে (বিশেষত কাঙ্ক্ষিত, যেহেতু টাচ স্ক্রিনে নেটিভ ডেট ম্যানিপুলেটররা অপরাজেয় আইএমএইচও হয়)। অন্যদের জন্য যাচাই করেন নি, তবে কোনও ওয়েবকিটে ব্যর্থ হওয়ার আশা করবেন না।

— pmucha
সূত্র
1
এটি কার্যকর হয় না, এটি আপনি পরিবর্তিত হন MMMM YYYY DD, কেবল DDপরিবর্তন হয়। -1 এর জন্য, দুঃখিত
— ও স্প্যাম
3
@ সামসুইফ্ট - আপনি মান পরিবর্তন করার পরে কি "রান" ক্লিক করেছেন? ;)
— বিকাল
9
না সে না. এটি কীভাবে কাজ করে তা আপনি বুঝতে পারেন না: আপনি জেএসের সাথে খেলেন এবং আপনার এইচটিএমএল দিয়ে খেলা উচিত। আপনি momentফাংশনের ইনপুট ফর্ম্যাটটি পরিবর্তন করেছেন এবং এটি যাওয়ার উপায় নয়। আপনার পরিবর্তন হওয়া উচিত ছিল data-date-format="DD-YYYY-MM"এবং তারপরে আপনি 09-2015-08 পেলেন যা সঠিক ফলাফল।
— pmucha
3
সাফারি, এজ, অপেরা
— তেও
2
ফায়ারফক্সে ভাঙ্গা
— আলেকজান্ডার ল্যালিয়ার
51

দুটি আলাদা ফর্ম্যাটকে আলাদা করা গুরুত্বপূর্ণ :

  • আরএফসি 3339 / আইএসও 8601 "তারের ফর্ম্যাট": ওয়াইওয়াইওয়াই-এমএম-ডিডি। এইচটিএমএল 5 স্পেসিফিকেশন অনুসারে, এই ফর্ম্যাটটি যা ফর্ম জমা দেওয়ার সময় ইনপুটটির মান বা DOM API এর মাধ্যমে অনুরোধ করার সময় ব্যবহার করতে হবে। এটি স্থানীয় এবং অঞ্চল স্বাধীন।
  • ব্যবহারকারী ইন্টারফেস নিয়ন্ত্রণ দ্বারা প্রদর্শিত ফর্ম্যাট এবং ব্যবহারকারী ইনপুট হিসাবে স্বীকৃত। ব্রাউজার বিক্রেতাদের ব্যবহারকারীর পছন্দসমূহ নির্বাচন অনুসরণ করতে উত্সাহিত করা হয়। উদাহরণস্বরূপ, ভাষা ও পাঠ্য পছন্দসই ফলকে নির্বাচিত "মার্কিন যুক্তরাষ্ট্র" অঞ্চল সহ ম্যাক ওএসে, ক্রোম 20 "এম / ডি / ইয়াই" ফর্ম্যাটটি ব্যবহার করে।

এইচটিএমএল 5 স্পেসিফিকেশনটিতে ওভাররাইডের কোনও উপায় বা ম্যানুয়ালি কোনও ফর্ম্যাট নির্দিষ্ট করে নেই।

— জন
সূত্র
1
না valueঅ্যাট্রিবিউট টেলিগ্রাম বিন্যাস মেলে, বা কি ব্যবহারকারীকে প্রদর্শন করা হয়?
— ফ্লিম
2
@ ফ্লিমটি valueবৈশিষ্ট্যটি সর্বদা তারের বিন্যাসের সাথে মেলে।
— ডেভিড ওয়ালশকস
14

আমার বিশ্বাস ব্রাউজারটি স্থানীয় তারিখের ফর্ম্যাটটি ব্যবহার করবে। এটি পরিবর্তন করা সম্ভব বলে মনে করবেন না। আপনি অবশ্যই একটি কাস্টম তারিখ চয়নকারী ব্যবহার করতে পারেন।

— মাইকেল মায়ার
সূত্র
1
স্থানীয় তারিখের ফর্ম্যাট মানে আমাদের ফোনের ডিফল্ট তারিখের ফর্ম্যাট বা অবস্থানের তারিখ ফর্ম্যাট?
— গোবিন্দराव কোন্ডালা
2
আপনি কোন মোবাইল ব্রাউজারটি ব্যবহার করছেন তার উপর নির্ভর করে। তবে আমি সন্দেহ করি এটি ফোনের ডিফল্ট হবে।
— মাইকেল মায়ার
2
"স্থানীয়" ফর্ম্যাটটির অর্থ ভৌগলিক অবস্থানের উপর ভিত্তি করে, যা সম্ভবত কোনও তারিখের ফর্ম্যাট নির্ধারণ করার সবচেয়ে খারাপ উপায়। ইউরোপে ভ্রমণকারী কোনও আমেরিকান কি তাদের স্মার্ট ফোনটি 24 ঘন্টা ফর্ম্যাট এবং yyyy-mm-dd বা dd / মিমি / yyyy হিসাবে তারিখগুলি দেখানো শুরু করবে বলে আশাবাদী? বা মার্কিন যুক্তরাষ্ট্রে একটি ইউরোপীয় এর বিপরীতে?
— রবজি
10

গুগল ক্রোম এর সর্বশেষ বিটা সংস্করণে শেষ পর্যন্ত ইনপুট ব্যবহার করে type=date, এবং ফর্ম্যাটটিDD-MM-YYYY ।

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

— Turamarth
সূত্র
18
আপনি যে ডিডি-এমএম-ওয়াইওয়াই ফর্ম্যাটটি উল্লেখ করেছেন সেটি সম্ভবত আপনার স্থানীয় ক্যালেন্ডার ফর্ম্যাট। কোনও ওয়েবসাইটের দর্শনার্থীদের উপর নির্দিষ্ট ফর্ম্যাটটি চাপিয়ে দেওয়া (এবং যতদূর আমি দেখতে পাচ্ছি, বর্তমানের এইচটিএমএল 5 স্ট্যান্ডার্ডের মধ্যে অসম্ভব) বুদ্ধিমানের কাজ নয়, কারণ আপনি তাদের উপর চাপিয়ে দেওয়া ক্যালেন্ডারের ফর্ম্যাটে ব্যবহার করতে পারেন।
— ডেভিড ওয়ালশটস
3
আপনি উপস্থাপনা ফর্ম্যাটটির কথা উল্লেখ করছেন, কারণ আপনি যদি ইনপুট.ওয়াল () পড়ার চেষ্টা করেন তবে গুগল ক্রোম (v35) yyyy-mm-dd বিন্যাসে তারিখটি দেয়, উপস্থাপনা বিন্যাস যাই হোক না কেন;)
— টিল্ট
3
@ ডেভিডওয়ালস্কটগুলি যদি কেবল আমেরিকানরা বুঝতে পারে যে বিশ্বের অন্যান্য অংশে প্রতিবন্ধী এমডি ফর্ম্যাটটিকে চাপ দেওয়া কতটা বোকামি।
— ব্যবহারকারী275801
@ ব্যবহারকারী275801 আমি সম্মত হওয়ার পরেও M-D-Yএটি একটি বিজোড় বিন্যাস। আমি আমেরিকানদের অন্যদের উপর জোর করে দেখিনি। :-)
— ডেভিড ওয়ালশটস
2
@ ডেভিডওয়ালসশটগুলি বেশিরভাগ সফ্টওয়্যার এবং অপারেটিং সিস্টেম দেখেছি যার জন্য আপনাকে আমেরিকান এমডি ফর্ম্যাটটি "অপ্ট-আউট" করতে হবে। সেই অর্থে এটি আসলে "বাধ্য" " আসলে আমার লিনাক্সের অস্ট্রেলিয়ার জন্য সমস্ত আঞ্চলিক সেটিংস রয়েছে, তবে আমার ব্রাউজারটি (একটি আমেরিকান ব্রাউজার, এটি বলা যেতে পারে) এখনও এটি এমডি ফর্ম্যাটে সমস্ত তারিখ প্রদর্শন করতে সক্ষম হয় এবং এই ক্ষেত্রে আমি অক্ষম " অনির্বাচন "।
— ব্যবহারকারী 275801
5

ব্যবহার করে দেখুন আপনি একটি প্রয়োজন এই দ্রুত সমাধান YYYY-MM-DD যেতে করতে "সেপ্টেম্বর dd- -2016"

1) আপনার ইনপুটটির কাছে একটি স্প্যান ক্লাস তৈরি করুন (লেবেল হিসাবে কাজ করুন)

2) আপনার তারিখ ব্যবহারকারীর দ্বারা পরিবর্তন করা হয় বা যখন ডেটা থেকে লোড করা দরকার হয় প্রতিবারই লেবেল আপডেট করুন।

আইকি 11 ব্রাউজারের ওয়েবকিট ব্রাউজারের মোবাইল এবং পয়েন্টার ইভেন্টগুলির জন্য কাজ করে jQuery এবং Jquery তারিখ প্রয়োজন

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
#date_input{text-indent: -500px;height:25px; width:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>
স্নিপেট প্রসারিত করুন

— মিগুয়েল
সূত্র
2
এটি প্রশ্নের উত্তর দেয় না এবং 2 টি গ্রন্থাগার প্রয়োজন, যার মধ্যে কোনও ট্যাগ বা জিজ্ঞাসা করা হয়নি। এটি তারিখের ম্যানুয়াল প্রবেশেরও অনুমতি দেয় না।
— রবজি
এটি পরিবর্তিত হতে বলা হয়নি, কেবল ফর্ম্যাট দেখান ... আপনি পূর্বরূপ হিসাবে এটি করতে পারেন এবং যে কোনও উপায়ে ফর্ম্যাট আপডেট করতে পরিবর্তনের ইভেন্টগুলির সাথে ইনপুট ব্যবহার করতে পারেন।
— মিগুয়েল
4

প্রচুর আলোচনা পড়ার পরে, আমি একটি সহজ সমাধান প্রস্তুত করেছি তবে আমি প্রচুর Jquery এবং CSS ব্যবহার করতে চাই না, কিছু জাভাস্ক্রিপ্ট।

এইচটিএমএল কোড:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

সিএসএস কোড:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

জাভাস্ক্রিপ্ট কোড:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

আউটপুট:

এখানে চিত্র বর্ণনা লিখুন

— আশিশ ভট্ট
সূত্র
3

যেমনটি বলা হয়েছে, <input type=date ... >বেশিরভাগ ব্রাউজারগুলিতে এটি পুরোপুরি বাস্তবায়িত হয় না, তাই ব্রাউজারগুলির মতো ক্রোমকোট (ক্রোম) এর বিষয়ে কথা বলা যাক।

লিনাক্স ব্যবহার করে, আপনি পরিবেশের পরিবর্তনশীল পরিবর্তন করে এটি পরিবর্তন করতে পারেন LANG, LC_TIMEকাজ করে না বলে মনে হচ্ছে (কমপক্ষে আমার জন্য)।

localeআপনার বর্তমান মানগুলি দেখতে আপনি একটি টার্মিনাল টাইপ করতে পারেন। আমি মনে করি আইওএস-তে একই ধারণা প্রয়োগ করা যেতে পারে।

যেমন: ব্যবহার:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

তারিখ হিসাবে প্রদর্শিত হয় mm/dd/yyyy

ব্যবহার: 

LANG=pt_BR /opt/google/chrome/chrome

তারিখ হিসাবে প্রদর্শিত হয় dd/mm/yyyy

আপনি http://lh.2xlibre.net/locale/pt_BR/ ব্যবহার করতে পারেন (পরিবর্তন করুন)pt_BR নিজের পছন্দমতো লোকেল তৈরি করতে এবং আপনার পছন্দ অনুযায়ী আপনার তারিখগুলি ফর্ম্যাট আপনার লোকাল অনুসারে ) করতে পারেন।

কীভাবে ডিফল্ট সিস্টেমের তারিখ পরিবর্তন হয় সে সম্পর্কে একটি দুর্দান্ত আরও উন্নত উল্লেখ: https://ccollins.wordpress.com/2009/01/06/how-to- بدل-date-formats-on-ubuntu/ এবং https: // Askubuntu unt কম / প্রশ্ন / 21316 / কীভাবে করতে পারেন-ই-কাস্টমাইজ-এ-সিস্টেম-লোকেল

আপনি ব্যবহার করে আপনাকে আসল বর্তমান তারিখের ফর্ম্যাটটি দেখতে পাবেন date:

$ date +%x
01-06-2015

তবে LC_TIMEএবং d_fmtক্রোম দ্বারা প্রত্যাখ্যাত বলে মনে হচ্ছে (এবং আমি মনে করি এটি ওয়েবকিট বা ক্রোমের কোনও ত্রুটি), দুর্ভাগ্যক্রমে এটি কাজ করে না । : '(

সুতরাং, দুর্ভাগ্যক্রমে প্রতিক্রিয়া, যদি LANGপরিবেশের পরিবর্তনশীল আপনার সমস্যার সমাধান না করে, তবে কোনও উপায় নেই।

— টন
সূত্র
+1 দুর্দান্ত! ব্যবহার: LANG=ja_JP.UTF-8 chromium-browserআমার জন্য কৌশলটি। এটি ভিভালদীর সাথেও কাজ করে এবং আমি অন্যান্য ব্রাউজারগুলিতেও অনুমান করি। ধন্যবাদ!
— লেপ 1
2

ব্রাউজারগুলি ব্যবহারকারীর সিস্টেমের তারিখের ফর্ম্যাট থেকে তারিখ-ইনপুট ফর্ম্যাটটি অর্জন করে।

(সমর্থিত ব্রাউজারগুলি, ক্রোম, এজ এ পরীক্ষিত)

তারিখ নিয়ন্ত্রণের স্টাইল পরিবর্তন করতে এখনকার মতো চশমা দ্বারা সংজ্ঞায়িত কোনও মান নেই, তাই ব্রাউজারগুলিতে এটি কার্যকর করা সম্ভব নয়।

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

মনে রাখবেন, এটি কেবল স্ক্রিনের ইউআই ফর্ম্যাট যা ব্যবহারকারীরা আপনার জাভাস্ক্রিপ্ট / ব্যাকএন্ডে সর্বদা আপনার পছন্দসই বিন্যাসটি রাখতে পারবেন।

একই সাথে গুগল বিকাশকারী পৃষ্ঠাগুলি দেখুন।

— রাহুল আর।
সূত্র
@ ডাউনভোটার্স, বর্তমান এবং ভবিষ্যতের উত্তরগুলি উন্নত করতে -1 সম্পর্কে একটি মন্তব্য করা ভাল।
— রাহুল আর
2

ওয়েব-কিট ব্রাউজারগুলি ব্যবহারকারীর কম্পিউটার বা মোবাইলগুলির ডিফল্ট তারিখের ফর্ম্যাট ব্যবহার করা সম্ভব নয়। আপনি যদি jquery এবং jquery UI ব্যবহার করতে পারেন তবে একটি তারিখ-চয়নকারী রয়েছে যা ডিজাইনেবল এবং এটি বিকাশকারীরা যে কোনও ফর্ম্যাটে প্রদর্শিত হতে পারে। jquery UI তারিখ-চয়নকারীটির লিঙ্কটি এই পৃষ্ঠায় রয়েছে http://jqueryui.com/datepicker/ আপনি ডেমো পাশাপাশি কোড এবং ডকুমেন্টেশন বা ডকুমেন্টেশন লিঙ্ক খুঁজে পেতে পারেন

সম্পাদনা: -আমি দেখতে পেয়েছি যে ক্রোম ভাষা সেটিং ব্যবহার করে যা ডিফল্টরূপে সিস্টেম সেটিংসের সমান হয় তবে ব্যবহারকারী সেগুলি পরিবর্তন করতে পারে তবে বিকাশকারী ব্যবহারকারীদের তা করতে বাধ্য করতে পারে না তাই আপনাকে অন্যান্য জেএস সমাধানগুলি ব্যবহার করতে হবে যেমন আমি বলি যে আপনি ওয়েব অনুসন্ধান করতে পারেন জাভাস্ক্রিপ্ট তারিখ-পিকার বা jquery তারিখ-চয়নকারী মত প্রশ্নের সাথে

— রবীন্দ্র পায়েল
সূত্র
2

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

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}
<input type="date" value="2019-12-07">
স্নিপেট প্রসারিত করুন

— সাফি এডাইন
সূত্র
0

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

আমার ক্ষেত্রে আমি কার্ড কার্ড পাঠকের কাছ থেকে তারিখটি পাই যা ডিডি / মিমি / ইয়াই ফর্ম্যাটে আসে।

আমি কি করবো. যেমন 

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }
<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">
স্নিপেট প্রসারিত করুন

কোডটি কী করে:

  1. "/" এর ভিত্তিতে আমি যে তারিখটি ডিডি / মিমি / ইয়াহী হিসাবে (বিভক্ত () ব্যবহার করে) পেয়েছি তা বিভক্ত হয় এবং একটি অ্যারে তৈরি করে,
  2. এটি তারপরে অ্যারেটিকে বিপরীত করে (বিপরীত () ব্যবহার করে) যেহেতু তারিখের ইনপুটটি আমি যা পাই তার বিপরীত সমর্থন করে।
  3. তারপরে এটি ইনপুট ক্ষেত্রে প্রয়োজনীয় ফর্ম্যাট অনুযায়ী একটি স্ট্রিংয়ের সাথে অ্যারে যোগ দিন () যোগ করে j

এই সমস্ত একটি এক লাইনে করা হয়।

আমি ভেবেছিলাম এটি কারওর পক্ষে সহায়তা করবে তাই আমি এটি লিখেছি।

— হিজবুল্লাহ শাহ
সূত্র
এটি জিজ্ঞাসিত প্রশ্নের সমাধান করে না; আপনি এখানে একটি কাস্টম ফর্ম্যাটটি পার্স করছেন , <input>মানটি দেখানোর জন্য যে বিন্যাসটি ব্যবহার করে তা পরিবর্তন করে না ।
— মার্ক আমেরিকা
এটি কেবল একটি কাজ
— হিজবুল্লাহ শাহ
0

আমি 2 বছর আগে এই সমস্যাটি অনুসন্ধান করেছি এবং আমার গুগল অনুসন্ধানগুলি আমাকে আবার এই প্রশ্নের দিকে নিয়ে যায়। খাঁটি জাভাস্ক্রিপ্ট সহ এটি হ্যান্ডেল করার চেষ্টা করে আপনার সময় নষ্ট করবেন না। আমি এটি তৈরি করার চেষ্টা করে আমার সময় নষ্ট করি dd/mm/yyyy। এমন কোনও সম্পূর্ণ সমাধান নেই যা সমস্ত ব্রাউজারের সাথে ফিট করে। সুতরাং আমি jQuery ডেটপিকার ব্যবহার করার বা আপনার ক্লায়েন্টকে তার পরিবর্তে ডিফল্ট তারিখ বিন্যাসের সাথে কাজ করার পরামর্শ দিচ্ছি

— আলী আল আমাইন
সূত্র
-1

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

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- দয়া করে নোট করুন যে এই পদ্ধতিটি কেবল ব্রাউজারের জন্য কাজ করে যা তারিখের প্রকারকে সমর্থন করে।

2- জেএস কোডের প্রথম ফাংশনটি ব্রাউজারের জন্য যা তারিখের ধরণটিকে সমর্থন করে না এবং একটি সাধারণ পাঠ্য ইনপুটটিতে চেহারা সেট করে।

3- আপনি যদি এই পৃষ্ঠার একাধিক তারিখ ইনপুটগুলির জন্য এই কোডটি ব্যবহার করেন তবে দয়া করে উভয় ফাংশন কলের পাঠ্য ইনপুট এবং "ইনপুট নিজেই অন্য কোনও কিছুতে আইডি" এক্সটাইম "পরিবর্তন করুন এবং অবশ্যই আপনি যে ইনপুটটি চান তার নামটি ব্যবহার করুন ফর্ম জমা দিন।

4-দ্বিতীয় ফাংশনে আপনি দিন + "/" + মাস + "/" + বছরের পরিবর্তে আপনার যে কোনও ফর্ম্যাট ব্যবহার করতে পারেন উদাহরণস্বরূপ বছরের জন্য "+" / "+ মাস +" / "+ দিন এবং পাঠ্য ইনপুটটিতে কোনও স্থানধারক বা মান হিসাবে ব্যবহার করুন পৃষ্ঠাটি লোড হয়ে গেলে ব্যবহারকারীর জন্য yyyy / মিমি / ডিডি।

— ছায়াময়
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.