অন্য অনেকের মতো আমিও এটি করার চেষ্টা করে অনেক সমস্যার মুখোমুখি হয়েছি এবং পোস্ট হওয়া সমাধানগুলির একটি সংমিশ্রণ এবং শেষ পর্যন্ত এটিকে নিখুঁত করার জন্য একটি বড় হ্যাক আমার একটি সমাধান পেয়েছে ।
আমি চেষ্টা করেছি এই থ্রেডে অন্যান্য সমাধানগুলির সাথে সমস্যাগুলি:
- ডেটপিকারে একটি নতুন তারিখ নির্বাচন করা, অন্যান্য ডেটপিকারগুলির (অভ্যন্তরীণ) তারিখকেও পরিবর্তন করতে পারে, সুতরাং যখন আপনি আবার অন্যগুলি খুলেন (বা তাদের তারিখ পাওয়ার চেষ্টা করেছিলেন), তাদের নির্ধারিত ইনপুটটিতে প্রদর্শিত তারিখের চেয়ে আলাদা তারিখ থাকতে পারে -field।
- ডেটপিকারটি আবার খোলার তারিখটি "মনে রাখে না"।
- তারিখগুলি জাফলিংয়ের জন্য কোডটি স্ট্রস্ট্রিং ব্যবহৃত হয়েছিল তাই এটি সমস্ত ফর্ম্যাটের সাথে উপযুক্ত নয়।
- "আমার মাসিক পিকার" কেবলমাত্র যখনই মান পরিবর্তন করা হত তার পরিবর্তে এটি বন্ধ করার সময় ইনপুট-ফিল্ডটি পরিবর্তন করে।
- ইনপুট-ফিল্ডটি সঠিকভাবে আপডেট হয় না, যদি আপনি কোনও তারিখের জন্য ভুলভাবে ফর্ম্যাট করা ইনপুট-স্ট্রিং টাইপ করেন এবং তারপরে ডেটপিকারে 'বন্ধ' ক্লিক করুন।
- আমার কাছে সাধারণ ডেটপিকার থাকতে পারে না, যা একই পাতায় মাসপিকার হিসাবে দিনগুলি দেখায়, যা দিনগুলি দেখায় না।
অবশেষে আমি এই সমস্ত সমস্যার সমাধান করার একটি উপায় খুঁজে পেয়েছি । প্রথম চারটি কেবল আপনার তারিখ- এবং মাসিক পিকারদের তাদের অভ্যন্তরীণ কোডে কীভাবে উল্লেখ করা যায় সে সম্পর্কে যত্নবান হয়ে এবং অবশ্যই আপনার পিকদের কিছু ম্যানুয়াল আপডেট করার মাধ্যমে ঠিক করা যেতে পারে। এটি আপনি নীচের কাছাকাছি ইনস্ট্যান্টেশন-উদাহরণগুলিতে দেখতে পাবেন। পঞ্চম সমস্যাটি ডেটপিকার ফাংশনে কিছু কাস্টম কোড যুক্ত করে সহায়তা করা যেতে পারে।
দ্রষ্টব্য: আপনার স্বাভাবিক ডেটপিকারে প্রথম তিনটি সমস্যা সমাধানের জন্য আপনাকে নিম্নলিখিত মাসিক পিকার স্ক্রিপ্টগুলি ব্যবহার করার দরকার নেই। কেবল এই পোস্টের নীচের দিকে ডেট পিকার ইনস্ট্যান্টেশন-স্ক্রিপ্টটি ব্যবহার করুন।
এখন, মাসপিকারগুলি ব্যবহার করতে এবং শেষ সমস্যাটি সংশোধন করতে আমাদের ডেটপিকার এবং মাসিক পিকারগুলি আলাদা করতে হবে। আমরা সেখানে কয়েকটি jQuery-UI মাসপিকার অ্যাডোন পেতে পারি, তবে কিছু লোকালাইজেশন নমনীয়তা / দক্ষতার অভাব, কিছু অ্যানিমেশন সমর্থন অভাব ... তাই, কি করতে হবে? ডেটপিকার-কোড থেকে আপনার "নিজস্ব" রোল করুন! এটি কেবল দিনগুলি প্রদর্শন না করেই ডেটপিকারের সমস্ত কার্যকারিতা সহ আপনাকে একটি পুরোপুরি কার্যকরী মাসপিকারকে পেয়ে যায়।
নীচে বর্ণিত পদ্ধতিটি ব্যবহার করে আমি jQuery-UI v1.11.1 কোডটি সহ একটি মাসপিকার জেএস-স্ক্রিপ্ট এবং তার সাথে থাকা সিএসএস-স্ক্রিপ্ট সরবরাহ করেছি । এই কোড-স্নিপেটগুলি যথাক্রমে দুটি নতুন ফাইল, মাসপিকার.জে এবং মাসিক পিকার.সিএস-এ অনুলিপি করুন।
আপনি যদি তার পরিবর্তে সহজ প্রক্রিয়াটি পড়তে চান যার মাধ্যমে আমি ডেটপিকারকে একটি মাসপিকারে রূপান্তর করি তবে শেষ বিভাগে স্ক্রোল করুন।
এখন পৃষ্ঠাটিতে ডেটপিকার এবং মাসপিকার যুক্ত করতে!
এই নিম্নলিখিত জাভাস্ক্রিপ্ট কোড-স্নিপেটগুলি পূর্বোক্ত সমস্যাগুলি ছাড়াই, পৃষ্ঠাটিতে একাধিক ডেটপিকার এবং / অথবা মাসপিকারগুলির সাথে কাজ করে ! সাধারণত '$ (এটি)' ব্যবহার করে স্থির করা হয়েছে। অনেক :)
প্রথম স্ক্রিপ্টটি একটি সাধারণ ডেটপিকারের জন্য, এবং দ্বিতীয়টি "নতুন" মাসিক পিকারদের জন্য।
আউট-মন্তব্য করা। এর পরে , যা আপনাকে ইনপুট-ফিল্ড সাফ করার জন্য কিছু উপাদান তৈরি করতে দেয়, পল রিচার্ডসের উত্তর থেকে চুরি হয়ে গেছে।
আমি আমার মাসপিকারে "এমএম yy" ফর্ম্যাটটি এবং আমার ডেটপিকারে 'yy-mm-dd' ফর্ম্যাটটি ব্যবহার করছি তবে এটি সমস্ত ফর্ম্যাটের সাথে পুরোপুরি সামঞ্জস্যপূর্ণ , তাই আপনি যে কোনওটি ব্যবহার করতে পারেন নিখরচায়। কেবল 'তারিখফর্ম্যাট' বিকল্পটি পরিবর্তন করুন। স্ট্যান্ডার্ড বিকল্পগুলি 'শো বাটনপ্যানেল', 'শোআনিম' এবং 'ইয়ার রেঞ্জ' অবশ্যই আপনার ইচ্ছা অনুযায়ী optionচ্ছিক এবং কাস্টমাইজযোগ্য।
একটি ডেটপিকার যুক্ত করা হচ্ছে
তারিখ পিকার ইনস্ট্যান্টেশন।
এটি এক 90 বছর আগের এবং আজকের দিন পর্যন্ত যায়। এটি আপনাকে ইনপুট-ফিল্ডটি সঠিক রাখতে সহায়তা করে, বিশেষত আপনি যদি ডিফল্ট তারিখ, মিনিটেট এবং সর্বোচ্চ তারিখ বিকল্পগুলি সেট করেন তবে আপনি এটি না করলে এটি এটি পরিচালনা করতে পারে। এটি আপনার চয়ন করা যে কোনও ডেটফর্ম্যাটের সাথে কাজ করবে।
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
একটি মাসপিকার যোগ করা হচ্ছে
আপনি যে মাসিকপিকার ব্যবহার করতে চান সেই পৃষ্ঠাতে মাসপিকার.জেএস ফাইল এবং মাসপিকার সিএসএস ফাইল অন্তর্ভুক্ত করুন।
মাসপিককার ইনস্ট্যান্টেশন
এই মাসপিকের কাছ থেকে প্রাপ্ত মানটি সর্বদা নির্বাচিত মাসের প্রথম দিন the চলতি মাসে শুরু হয় এবং 100 বছর আগে এবং 10 বছর ভবিষ্যতের মধ্যে রয়েছে।
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
এটাই!
আপনাকে কেবল মাসিক পিকার তৈরি করতে হবে।
আমি এটি দিয়ে কোনও জেসফিল্ড কাজ করতে পারে বলে মনে হয় না, তবে এটি আমার এএসপি.নেট এমভিসি প্রকল্পে আমার জন্য কাজ করছে। আপনার পৃষ্ঠায় ডেটপিকারটি যুক্ত করতে আপনি সাধারণত যা করেন তা করুন এবং উপরের স্ক্রিপ্টগুলি সংযুক্ত করুন, সম্ভবত নির্বাচক (যার অর্থ "(" # মাইমোনথটেক্সটবক্স ")) আপনার জন্য কাজ করে তা পরিবর্তন করে।
আমি আশা করি এটা কারো সাহায্যে লাগবে.
কিছু অতিরিক্ত তারিখের জন্য পেস্টবিনগুলিতে লিঙ্কগুলি- এবং মাসপিকিকার সেটআপগুলি:
মাসের পিকার মাসের শেষ দিনে কাজ করছেন । এই মাস পিকারের কাছ থেকে আপনি যে তারিখটি পাবেন তা সর্বদা মাসের শেষ দিন।
দু'জন সহযোগী মাসপিকার ; 'স্টার্ট' মাসের প্রথম দিকে কাজ করছে, এবং 'শেষ' মাসের শেষের দিকে কাজ করছে। এগুলি উভয়ই একে অপরের দ্বারা সীমাবদ্ধ, সুতরাং 'প্রারম্ভিক' নির্বাচনের আগে নির্বাচিত মাসের আগে 'সমাপ্তি'-তে একটি মাস বেছে নেওয়া' শেষ 'হিসাবে একই মাস হিসাবে পরিবর্তিত হবে will এবং বিপরীতভাবে. বিকল্প: 'শুরু' -র দিকে কোনও মাস বাছাই করার সময় 'শেষ' -র 'মিনিট তারিখ' সেই মাসে সেট করা থাকে। এই বৈশিষ্ট্যটি সরাতে, অনক্লোজে একটি লাইন মন্তব্য করুন (মন্তব্যগুলি পড়ুন)।
দু'জন সহযোগী তারিখপিকার ; এগুলি উভয়ই একে অপরের দ্বারা সীমাবদ্ধ, সুতরাং 'প্রারম্ভিক' তারিখ বেছে নেওয়া যা 'শুরু' -র নির্বাচিত তারিখের আগে, 'শুরু' পরিবর্তন করে 'শেষ' হিসাবে একই মাস হতে পারে। এবং বিপরীতভাবে. বিকল্প: 'শুরু' -র তারিখ নির্বাচন করার সময়, 'শেষ' -র 'মিনিট তারিখ' date তারিখে সেট করা থাকে। এই বৈশিষ্ট্যটি সরাতে, অনক্লোজে একটি লাইন মন্তব্য করুন (মন্তব্যগুলি পড়ুন)।
আমি কীভাবে ডেটপিকারকে মাসপিকার হিসাবে পরিণত করেছি
আমি তাদের ডেটপিকারের সাথে সম্পর্কিত jquery-ui-1.11.1.js থেকে সমস্ত জাভাস্ক্রিপ্ট কোড নিয়েছি, এটি একটি নতুন জেএস-ফাইলে পেস্ট করেছি এবং নিম্নলিখিত স্ট্রিংগুলি প্রতিস্থাপন করেছি:
- "ডেটপিকার" ==> "মাসিক পিকার"
- "তারিখপিকার" ==> "মাসিক পিকার"
- "তারিখ চয়নকারী" ==> "মাস চয়নকারী"
- "তারিখ চয়নকারী" ==> "মাস চয়নকারী"
তারপরে আমি ফর-লুপের অংশটি সরিয়ে ফেললাম যা পুরো ইউআই-ডেটপিকার-ক্যালেন্ডার ডিভ তৈরি করে (ডিভ যা অন্যান্য সমাধানগুলি সিএসএস ব্যবহার করে আড়াল করে)। এটি _ জেনারেট এইচটিএমএল: ফাংশন (ইনস্ট) -এ পাওয়া যাবে।
যে লাইনটি বলেছে তা সন্ধান করুন:
"</div><table class='ui-datepicker-calendar'><thead>" +
ডিভ-ট্যাগটি বন্ধ হওয়ার পরে এবং লাইনটিতে যেখানে লেখা আছে সেখানে (এবং অন্তর্ভুক্ত নয় ) নীচে সবকিছু চিহ্নিত করুন :
drawMonth++;
এখন এটি অসন্তুষ্ট হবে কারণ আমাদের কিছু জিনিস বন্ধ করতে হবে। আগে থেকে ডিভ-ট্যাগ বন্ধ করার পরে এটি যুক্ত করুন:
";
কোডটি এখন খুব সুন্দরভাবে একসাথে করা উচিত। এখানে একটি কোড-স্নিপেট দেখানো হচ্ছে যাতে আপনার কী শেষ করা উচিত ছিল:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
তারপরে আমি ডেটপিকারের সাথে সম্পর্কিত jquery-ui.css থেকে কোডটি একটি নতুন সিএসএস-ফাইলে কপি / পেস্ট করেছি এবং নিম্নলিখিত স্ট্রিংগুলি প্রতিস্থাপন করেছি:
- "ডেটপিকার" ==> "মাসিক পিকার"
