আমি ভাবছি যে এইচটিএমএলে তারিখের ফর্ম্যাট সেট করা সম্ভব কিনা <input type="date"></input>
ট্যাগে ... বর্তমানে এটি yyyy-মিমি-ডিডি, যদিও আমার এটি ডিডি-মিমি-ইয়ি ফর্ম্যাটে দরকার।
আমি ভাবছি যে এইচটিএমএলে তারিখের ফর্ম্যাট সেট করা সম্ভব কিনা <input type="date"></input>
ট্যাগে ... বর্তমানে এটি yyyy-মিমি-ডিডি, যদিও আমার এটি ডিডি-মিমি-ইয়ি ফর্ম্যাটে দরকার।
উত্তর:
আপনি না।
প্রথমত, আপনার প্রশ্নটি দ্ব্যর্থক - আপনি যে ফর্ম্যাটটি এটি ব্যবহারকারীর কাছে প্রদর্শিত হয়, বা যে ফর্ম্যাটটি এটি ওয়েব সার্ভারে সংক্রমণিত তা বোঝাতে চান?
আপনি যদি সেই বিন্যাসটি বোঝাতে চান যা এটি ব্যবহারকারীর কাছে প্রদর্শিত হয়, তবে এটি নীচে-শেষ ইউজার ইন্টারফেসে নেমে আসবে, আপনি এইচটিএমএল-তে নির্দিষ্ট কিছু নয়। সাধারণত, আমি এটি অপারেটিং সিস্টেমের লোকাল সেটিংসে সেট করা তারিখের ফর্ম্যাটের ভিত্তিতে প্রত্যাশা করব। এটি আপনার নিজের পছন্দসই বিন্যাসের সাথে ওভাররাইড করার চেষ্টা করার কোনও অর্থ হয় না, কারণ এটি যে ফর্ম্যাটটিতে প্রদর্শিত হয় তা ব্যবহারকারীর লোকেলের জন্য সঠিকভাবে (সাধারণভাবে বলা হয়) এবং ব্যবহারকারী যে তারিখে লেখার / বোঝার জন্য ব্যবহৃত হয় সেই ফর্ম্যাটটি।
যদি আপনি যে ফর্ম্যাটটি এটি সার্ভারে স্থানান্তরিত করতে চান তবে আপনি ভুল সমস্যাটি সমাধান করার চেষ্টা করছেন। আপনাকে যা করতে হবে তা হল yyyy-mm-dd ফর্ম্যাটে তারিখগুলি স্বীকার করার জন্য সার্ভার-সাইড কোড প্রোগ্রাম করা।
input[type=password]
বলছে যে "ব্যবহারকারী এজেন্টের মূল্যটি অস্পষ্ট করা উচিত যাতে ব্যবহারকারী ব্যতীত অন্য ব্যক্তিরা এটি দেখতে না পারে", যা ইউজার এজেন্টকে নির্দিষ্ট পদ্ধতিতে তারিখটি উপস্থাপন করা উচিত বলে ঠিক ততটাই উপস্থাপনা।
আমি স্ট্যাকওভারফ্লোতে একই প্রশ্ন বা সম্পর্কিত প্রশ্ন পেয়েছি
ইনপুট টাইপ = "তারিখ" ফর্ম্যাট পরিবর্তন করার কোনও উপায় আছে কি?
আমি একটি সহজ সমাধান পেয়েছি, আপনি পার্টিকুলেট ফর্ম্যাটটি দিতে পারবেন না তবে আপনি এটি পছন্দ মতো করতে পারেন।
এইচটিএমএল কোড:
<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;
}
আউটপুট:
আপনি যদি jQuery ব্যবহার করেন তবে এখানে একটি দুর্দান্ত সহজ পদ্ধতি
$("#dateField").val(new Date().toISOString().substring(0, 10));
বা পুরানো traditionalতিহ্যগত উপায় আছে:
document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
এইচটিএমএল 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"/>
আমার মনে হয়, এইচটিএমএলে ডিডি-এমএম-ওয়াইওয়াই ফর্ম্যাটের কোনও বাক্য গঠন নেই। এই পৃষ্ঠাটি দেখুন http://www.java2s.com/Code/SQLServer/Date-Timezone/ FormatdateMmmddyyyyhhmmdp.htm । কিছুটা এটি আপনাকে সাহায্য করবে। অন্যথায় জাভাস্ক্রিপ্ট তারিখ চয়নকারী ব্যবহার করুন।
আমি এটি নিশ্চিতভাবে জানি না, তবে আমি মনে করি এটি ব্যবহারকারীর তারিখ / সময় সেটিংসের উপর ভিত্তি করে ব্রাউজার দ্বারা পরিচালনা করা হবে। আপনার কম্পিউটারটিকে সেই ফর্ম্যাটে তারিখগুলি প্রদর্শন করার জন্য চেষ্টা করুন।
$('input[type="date"]').change(function(){
alert(this.value.split("-").reverse().join("-"));
});
আমি অনেক গবেষণা করেছি এবং আমি মনে করি না যে কেউ এর বিন্যাসকে জোর করতে পারে <input type="date">
। ব্রাউজারটি স্থানীয় ফর্ম্যাটটি নির্বাচন করে এবং ব্যবহারকারীর সেটিংসের উপর নির্ভর করে যদি ব্যবহারকারীর ভাষা ইংরাজীতে থাকে তবে তারিখটি ইংলিশ ফর্ম্যাটে প্রদর্শিত হবে (মিমি / ডিডি / ইয়াই)।
আমার মতে, প্রদর্শনটি নিয়ন্ত্রণ করতে একটি প্লাগইন ব্যবহার করা সবচেয়ে ভাল সমাধান।
আপনি স্থানীয়করণ , তারিখের ফর্ম্যাটকে বাধ্য করতে পারেন বলে জ্যাকুরি ডেটপিকারটি একটি ভাল বিকল্প বলে মনে হচ্ছে ...
আমি যে কিছু পড়েছি তার চেয়ে কিছুটা আলাদা উত্তর নিয়ে এসেছি।
আমার সমাধানটিতে জাভাস্ক্রিপ্টের একটি সামান্য বিট এবং একটি এইচটিএমএল ইনপুট ব্যবহার করা হয়েছে।
একটি ইনপুট দ্বারা গৃহীত তারিখটি একটি স্ট্রিংয়ের ফল হিসাবে '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]}`));
আপনি নিজের পছন্দ মতো তারিখটি ফর্ম্যাট করতে পারেন। আপনি একটি নতুন তারিখ () তৈরি করতে পারেন এবং সেখান থেকে সমস্ত তথ্য দখল করতে পারেন ... বা আপনার স্ট্রিং তৈরি করতে কেবল 'ইউজারডেট []' ব্যবহার করতে পারেন।
মনে রাখবেন, 'নতুন তারিখ ()' এ একটি তারিখ প্রবেশের কিছু উপায় অপ্রত্যাশিত ফলাফলের জন্ম দেয়। (যেমন - একদিন পিছনে)
<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>
সংক্ষিপ্ত প্রত্যক্ষ উত্তরটি বাক্সের বাইরে নয় বা নেই তবে আমি একটি টেক্সট বাক্স এবং খাঁটি জেএস কোড ব্যবহারের তারিখের ইনপুট অনুকরণ করার জন্য এবং আপনার পছন্দসই যে কোনও বিন্যাস করতে চাইলে একটি পদ্ধতি নিয়ে এসেছি, এখানে কোডটি দেওয়া হয়েছে
<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">▼</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 / মিমি / ডিডি।
মিমি-ডিডি-ইয়ে ফর্ম্যাট করার জন্য
এএ = date.split ( "-")
তারিখ = এএ [1] '- + এএ [2]' - + এএ [0]
কোনও নির্ভরতা ছাড়াই পরিষ্কার বাস্তবায়ন। 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>
সমাধান এখানে:
<input type="text" id="end_dt"/>
$(document).ready(function () {
$("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});
আশা করি এটি সমস্যার সমাধান করবে :)