এইচটিএমএল তারিখ ইনপুট ট্যাগে তারিখের ফর্ম্যাট কীভাবে সেট করবেন?


105

আমি ভাবছি যে এইচটিএমএলে তারিখের ফর্ম্যাট সেট করা সম্ভব কিনা <input type="date"></input> ট্যাগে ... বর্তমানে এটি yyyy-মিমি-ডিডি, যদিও আমার এটি ডিডি-মিমি-ইয়ি ফর্ম্যাটে দরকার।


3
এটি কি এইচটিএমএল 5 ইনপুট টাইপের = তারিখের মান আউটপুট নির্দিষ্ট করার সম্ভাব্য নকল নয় ? ? আমি বলব, এখানে এই প্রশ্নটি সেই প্রবীণটির চেয়ে ভাল জিজ্ঞাসা করা হয়েছে , তবে সেই প্রবীণটির বেশ ভাল উত্তর রয়েছে।
আর্সেন


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

উত্তর:


11

আপনি না।

প্রথমত, আপনার প্রশ্নটি দ্ব্যর্থক - আপনি যে ফর্ম্যাটটি এটি ব্যবহারকারীর কাছে প্রদর্শিত হয়, বা যে ফর্ম্যাটটি এটি ওয়েব সার্ভারে সংক্রমণিত তা বোঝাতে চান?

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

যদি আপনি যে ফর্ম্যাটটি এটি সার্ভারে স্থানান্তরিত করতে চান তবে আপনি ভুল সমস্যাটি সমাধান করার চেষ্টা করছেন। আপনাকে যা করতে হবে তা হল yyyy-mm-dd ফর্ম্যাটে তারিখগুলি স্বীকার করার জন্য সার্ভার-সাইড কোড প্রোগ্রাম করা।


দুঃখের বিষয়, আপনার দ্বিতীয় মন্তব্যটি সত্যিকারের বিশ্বে যথেষ্ট সত্য নয়। কিছু ব্রাউজার, ক্রোম এবং অপেরা মত, অন্তত সম্মান না অর্ডার সত্তাগুলির, যদিও কিছুই যে এর চেয়ে আরও অনেক কিছু। উদাহরণস্বরূপ, আমার ওএস লোকাল সেটিংস উল্লেখ করে যে একটি সংক্ষিপ্ত তারিখ হিসাবে, এই বছরের আগস্টের প্রথম দিনটি 1 / 8-2016 হওয়া উচিত , তবে ক্রোম এবং অপেরা শো 01/08/2016 । অন্যান্য ব্রাউজারগুলি, যেমন সাফারি এবং ফায়ারফক্স (কমপক্ষে ওএস এক্সে) ওএস সেটিংসকে পুরোপুরি উপেক্ষা করে এবং সর্বদা 2016-08-16 দেখায় যাই হোক না কেন। এমন কোনও সাইটে যেখানে ব্যবহারকারীরা তাদের নিজস্ব তারিখের পছন্দগুলি নির্ধারণ করতে পারেন, এটি অবশ্যই এটিকে ওভাররাইড করে তোলে।
জানুস বাহস জ্যাকেট

(ফায়ারফক্স এবং সাফারি সম্পর্কে নোটটি উপেক্ষা করুন ... আমি ক্লান্ত হয়ে পড়েছি ither কোনও ব্রাউজারই তারিখের ধরণটি মোটেও সমর্থন করে না, তাই তারা কেবলমাত্র মানটির অন্তর্নিহিত বিন্যাসটি দেখাচ্ছে যা আমার বর্তমান কোডের ক্ষেত্রে YYYY-MM-DD ।)
জানুস বাহস জ্যাকেট

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

সমস্যাটি হ'ল এটি একটি উপস্থাপনা সেটিংস যা সেট করা যায় না । সাধারণভাবে উপস্থাপনা সেটিংস CSS এর অন্তর্ভুক্ত তবে এটি CSS এ পরিবর্তন করার কোনও উপায় নেই (বা অন্য কোথাও)। এছাড়াও, এমনকি এইচটিএমএল স্পেস নিজেই উপস্থাপনা সেটিংস থেকে মুক্ত নয়। উদাহরণস্বরূপ, বিভাগটি input[type=password]বলছে যে "ব্যবহারকারী এজেন্টের মূল্যটি অস্পষ্ট করা উচিত যাতে ব্যবহারকারী ব্যতীত অন্য ব্যক্তিরা এটি দেখতে না পারে", যা ইউজার এজেন্টকে নির্দিষ্ট পদ্ধতিতে তারিখটি উপস্থাপন করা উচিত বলে ঠিক ততটাই উপস্থাপনা।
জানুস বাহস জ্যাকেট

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

11

আমি স্ট্যাকওভারফ্লোতে একই প্রশ্ন বা সম্পর্কিত প্রশ্ন পেয়েছি

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

আমি একটি সহজ সমাধান পেয়েছি, আপনি পার্টিকুলেট ফর্ম্যাটটি দিতে পারবেন না তবে আপনি এটি পছন্দ মতো করতে পারেন।

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

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

সিএসএস কোড:

#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;
}

আউটপুট:

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


আরও ভাল - নিয়মিত
জর্জ মাউয়ার ২

আপনার জবাবের জন্য ধন্যবাদ, আপনার যদি এর জন্য কোনও লিঙ্ক বা কোড থাকে তবে আমার আপডেট করতে হবে
এশিশ ভাট

এটি একটি দুর্দান্ত বিকল্প।
ডিলন বারনেট

আমার ধারণা তিনি সিএসএস বা জাভাস্ক্রিপ্ট নয়, এইচটিএমএল (প্রশ্নের ভিত্তিতে) দিয়ে এটি সম্ভব কিনা তা জিজ্ঞাসা করছেন I
শিজুকুরা

6

আপনি যদি jQuery ব্যবহার করেন তবে এখানে একটি দুর্দান্ত সহজ পদ্ধতি

$("#dateField").val(new Date().toISOString().substring(0, 10));

বা পুরানো traditionalতিহ্যগত উপায় আছে:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

4

এইচটিএমএল 5 ডেট কন্ট্রোলটি যেমন আছে তেমনটি কেন ব্যবহার করবেন না, এটি অন্যান্য বৈশিষ্ট্যগুলির সাহায্যে যা তারিখ প্রকার সমর্থন করে এবং এখনও ফায়ারফক্সের মতো অন্যান্য ব্রাউজারগুলিতে কাজ করে যা এখনও তারিখের ধরণ সমর্থন করে না

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>

<pre> <ইনপুট টাইপ = "পাঠ্য" নাম = "ইনপুট 1" স্থানধারক = "YYYY-MM-DD" প্রয়োজনীয় প্যাটার্ন = "[0-9] {4} - [0-9] {2} - [0-9 ] {2} "শিরোনাম =" YYYY-MM-DD formarket এ একটি তারিখ লিখুন "/> </pre>
পল আইই

8
প্রয়োজনীয়তাটি পরিষ্কারভাবে ছিল, আমি উদ্ধৃতি দিয়েছিলাম - "আমার এটি ডিডি-মিমি-ইয়ে ফর্ম্যাটে দরকার in" কিভাবে এই সাহায্য করে?
হরিজ ক্রিটেনিস

1
ফায়ারফক্সের সাথে কাজ করে না। এই এইচটিএমএল স্থানধারক মিমি / ডিডি / ইয়াহির সাথে একটি ইনপুট দেখায়। আমার উইন্ডোজ এবং আমার ফায়ারফক্স উভয়ই ডাচকে প্রথম ভাষা হিসাবে সেট করেছে। উইন্ডোজ আঞ্চলিক সেটিং সংক্ষিপ্ত তারিখ দেখায়: 30-11-2018।
রোল্যান্ড

1

আমার মনে হয়, এইচটিএমএলে ডিডি-এমএম-ওয়াইওয়াই ফর্ম্যাটের কোনও বাক্য গঠন নেই। এই পৃষ্ঠাটি দেখুন http://www.java2s.com/Code/SQLServer/Date-Timezone/ FormatdateMmmddyyyyhhmmdp.htm । কিছুটা এটি আপনাকে সাহায্য করবে। অন্যথায় জাভাস্ক্রিপ্ট তারিখ চয়নকারী ব্যবহার করুন।


1

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


1
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

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

1

আমি অনেক গবেষণা করেছি এবং আমি মনে করি না যে কেউ এর বিন্যাসকে জোর করতে পারে <input type="date"> । ব্রাউজারটি স্থানীয় ফর্ম্যাটটি নির্বাচন করে এবং ব্যবহারকারীর সেটিংসের উপর নির্ভর করে যদি ব্যবহারকারীর ভাষা ইংরাজীতে থাকে তবে তারিখটি ইংলিশ ফর্ম্যাটে প্রদর্শিত হবে (মিমি / ডিডি / ইয়াই)।

আমার মতে, প্রদর্শনটি নিয়ন্ত্রণ করতে একটি প্লাগইন ব্যবহার করা সবচেয়ে ভাল সমাধান।

আপনি স্থানীয়করণ , তারিখের ফর্ম্যাটকে বাধ্য করতে পারেন বলে জ্যাকুরি ডেটপিকারটি একটি ভাল বিকল্প বলে মনে হচ্ছে ...


1

আমি যে কিছু পড়েছি তার চেয়ে কিছুটা আলাদা উত্তর নিয়ে এসেছি।

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

একটি ইনপুট দ্বারা গৃহীত তারিখটি একটি স্ট্রিংয়ের ফল হিসাবে 'yyyy-mm-dd' হিসাবে ফর্ম্যাট হয়। আমরা এটিকে বিভক্ত করতে এবং এটি একটি নতুন তারিখ () হিসাবে যথাযথভাবে স্থাপন করতে পারি।

এখানে বেসিক এইচটিএমএল:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

এখানে বেসিক জেএস:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

আপনি নিজের পছন্দ মতো তারিখটি ফর্ম্যাট করতে পারেন। আপনি একটি নতুন তারিখ () তৈরি করতে পারেন এবং সেখান থেকে সমস্ত তথ্য দখল করতে পারেন ... বা আপনার স্ট্রিং তৈরি করতে কেবল 'ইউজারডেট []' ব্যবহার করতে পারেন।

মনে রাখবেন, 'নতুন তারিখ ()' এ একটি তারিখ প্রবেশের কিছু উপায় অপ্রত্যাশিত ফলাফলের জন্ম দেয়। (যেমন - একদিন পিছনে)


1
<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

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

0

সংক্ষিপ্ত প্রত্যক্ষ উত্তরটি বাক্সের বাইরে নয় বা নেই তবে আমি একটি টেক্সট বাক্স এবং খাঁটি জেএস কোড ব্যবহারের তারিখের ইনপুট অনুকরণ করার জন্য এবং আপনার পছন্দসই যে কোনও বিন্যাস করতে চাইলে একটি পদ্ধতি নিয়ে এসেছি, এখানে কোডটি দেওয়া হয়েছে

<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 / মিমি / ডিডি।


0

মিমি-ডিডি-ইয়ে ফর্ম্যাট করার জন্য

এএ = date.split ( "-")

তারিখ = এএ [1] '- + এএ [2]' - + এএ [0]


-1

কোনও নির্ভরতা ছাড়াই পরিষ্কার বাস্তবায়ন। https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>

-2

সমাধান এখানে:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

আশা করি এটি সমস্যার সমাধান করবে :)


1
আপনার সমাধানটি তারিখ প্রকারের এইচটিএমএল ইনপুটটি ব্যবহার করে না, সুতরাং সত্যই প্রশ্নের উত্তর দিচ্ছে না।
ভিনসেন্ট

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

-3

তারিখের মানটির বিন্যাসটি 'YYYY-MM-DD'। নিম্নলিখিত উদাহরণ দেখুন

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

আপনার কেবলমাত্র পিএইচপি, এসপি, রুবিতে যে ফর্ম্যাটটি রয়েছে তা তারিখের বিন্যাস করা।

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