jQuery UI: তারিখপিকার সেট বর্ষের ড্রপডাউনটি 100 বছরে সেট করে

Question

ডেটপিকার ব্যবহার করে ডিফল্টরূপে বছরের ড্রপ ডাউন কেবল 10 বছর দেখায়। আরও বছর যুক্ত হওয়ার জন্য ব্যবহারকারীকে গত বছর ক্লিক করতে হবে।

আমরা কীভাবে প্রাথমিক পরিসরটি 100 বছর নির্ধারণ করতে পারি যাতে ব্যবহারকারী ডিফল্টরূপে একটি বৃহত তালিকা দেখতে পান?

    function InitDatePickers() {
        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            maxDate: '@maxDate',
            minDate: '@minDate'
        });
    }

Comments

@ ডমাইজ: যদি কেবল এপিআই ডক্সে এক নজরে উত্তর না দেওয়া হত ... তবে হ্যাঁ, চিত্রটি সুন্দর ... :-)

— টিজে ক্রাউডার

@ টিজে ক্রাউডার একটি নিয়ম থাকা উচিত যা প্রশ্নগুলি দেখতে এই জাতীয়। এবং প্রকৃতপক্ষে, এপিআই

— ডক্সে সন্ধান করা

@ টিজে ক্রাউডার ভাল কথা যে একটি এপিআই রয়েছে। তবে আমি সবেমাত্র "জ্যাকুয়ের ডেটপিকার ইয়ার রেঞ্জ" গুগল করেছি এবং এটি পেয়েছি। 10 সেকেন্ডের মধ্যে আমার প্রশ্নের উত্তর। এরপরে তাত্ক্ষণিকভাবে একটি API ব্যবহার করা।

— এডউইন স্টোটেলার 14

Answer 1

আপনি এখানে ডকুমেন্টেশন প্রতি এই বিকল্পটি ব্যবহার করে বছরের পরিসরটি সেট করতে পারেন http://api.jqueryui.com/datepicker/#option-yearRange

yearRange: '1950:2013', // specifying a hard coded year range

বা এই ভাবে

yearRange: "-100:+0", // last hundred years

ডক্স থেকে

ডিফল্ট: "সি -10: সি + 10"

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

Comments

আমি বুঝতে পারার আগেই সমস্যা হচ্ছিল যে +সাইনটি প্রয়োজন।

— th1rdey3

ধন্যবাদ, কঠোরভাবে এ বছর কোডিং করুন রেঞ্জ: '1950: 2013' কাজ করেছে

— রোনাল্ড নসবিয়ের

jQuey-Ui বছরের রেঞ্জের জন্য: "সি -100: + সি + 10" কাজ করে যেখানে সি বছরের জন্য দাঁড়িয়েছে

— টেকিবিরিজ

@ টেকি ব্রিজ এটি সহায়ক তবে এটি হওয়ার কথাc-100:c+10

— ড্রিমটেক

@ অবিসিডিয়ান cআসলে "বর্তমান নির্বাচিত বছর" এবং বর্তমান বছর নয় api.jqueryui.com/datepicker/#option-yearRange

— 23 ᄐ ᶌ

Answer 2

এটি আমার জন্য পুরোপুরি কাজ করেন।

ChangeYear: - সত্য হিসাবে সেট করা হলে, ইঙ্গিত দেয় যে চলতি মাসের ক্যালেন্ডারে উল্লিখিত পূর্ববর্তী বা পরবর্তী মাসের ঘরগুলি নির্বাচন করা যেতে পারে। এই অপশনটি বিকল্পগুলির সাথে ব্যবহৃত হয় ther

ইয়াররেঞ্জ: - বছরের ড্রপডাউন বছরের বিভিন্ন সীমা নির্দিষ্ট করে। (ডিফল্ট মান: "-10: +10 ″)

উদাহরণ: -

$(document).ready(function() {
    $("#date").datepicker({
    changeYear:true,
    yearRange: "2005:2015"
    });
});

তথ্যসূত্র : - jquery ডেটপিকারে বছরের পরিসীমা সেট করুন

Answer 3

আমি এটা করেছি:

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

50চলতি বছর থেকে রেঞ্জটি কোথায় ?

Answer 4

আপনি jQuery UI ডেটপিকারে এই বিকল্পটি ব্যবহার করে বছরের পরিসরটি সেট করতে পারেন:

yearRange: "c-100:c+0", // last hundred years and current years

yearRange: "c-100:c+100", // last hundred years and future hundred years

yearRange: "c-10:c+10", // last ten years and future ten years

Comments

উদাহরণগুলির জন্য ধন্যবাদ

— জে

Answer 5

এটির পরামর্শ দেওয়ার জন্য এটি দিনের কিছুটা দেরি হয়ে গেছে, মূল প্রশ্নটি কত আগে প্রকাশিত হয়েছিল তা দেওয়া হয়েছিল, তবে আমি এটিই করেছি।

আমার 70০ বছর ব্যাপ্তির দরকার ছিল, যা প্রায় ১০০ নয়, দর্শনার্থীর পক্ষে স্ক্রোল করার জন্য এখনও অনেক বছর। (jQuery বছরের পর বছর দলে দলে দলে যায়, তবে বেশিরভাগ লোকের জন্য এটি প্যাটোইসের ব্যথা))

প্রথম পদক্ষেপটি ছিল ডেটপিকার উইজেটের জন্য জাভাস্ক্রিপ্টটি পরিবর্তন করা: jquery-ui.js বা jquery-ui-min.js (যেখানে এটি হ্রাস করা হবে) এ কোডটি সন্ধান করুন:

for (a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+".datepicker._selectMonthYear('#"+
a.id+"', this, 'Y');\" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');\">";b<=g;b++)
 a.yearshtml+='<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
a.yearshtml+="</select>";

এবং এটি দিয়ে এটি প্রতিস্থাপন করুন:

a.yearshtml+='<select class="ui-datepicker-year" onchange="DP_jQuery_'+y+
 ".datepicker._selectMonthYear('#"+a.id+"', this, 'Y');
 \" onclick=\"DP_jQuery_"+y+".datepicker._clickMonthYear('#"+a.id+"');
 \">";
for(opg=-1;b<=g;b++) {
    a.yearshtml+=((b%10)==0 || opg==-1 ?
        (opg==1 ? (opg=0, '</optgroup>') : '')+
        (b<(g-10) ? (opg=1, '<optgroup label="'+b+' >">') : '') : '')+
        '<option value="'+b+'"'+(b==c?' selected="selected"':"")+">"+b+"</option>";
}
a.yearshtml+="</select>";

এটি OPTGROUP ট্যাগ সহ দশকগুলি (বর্তমান ব্যতীত) ঘিরে রয়েছে।

এর পরে, এটি আপনার সিএসএস ফাইলে যুক্ত করুন:

.ui-datepicker OPTGROUP { font-weight:normal; }
.ui-datepicker OPTGROUP OPTION { display:none; text-align:right; }
.ui-datepicker OPTGROUP:hover OPTION { display:block; }

এটি বেস বছর ধরে দর্শনার্থীদের মাউস না হওয়া পর্যন্ত দশকগুলি গোপন করে। আপনার দর্শনার্থী যেকোন বছরের মধ্যে দ্রুত স্ক্রোল করতে পারেন।

এটিকে নির্দ্বিধায় ব্যবহার করুন; শুধু দয়া করে আপনার কোডে যথাযথ অনুষঙ্গ দিন।

Answer 6

আমি জন্ম তারিখটি নির্বাচন করতে ডেটপিকারটি প্রয়োগ করতে চেয়েছিলাম এবং yearRangeএটি আমার সংস্করণ (1.5) হিসাবে কাজ করে বলে মনে হচ্ছে না কারণ এটি পরিবর্তন করতে আমার সমস্যা হয়েছিল had আমি এখানে নতুন jquery-ui তারিখ পিকার সংস্করণে আপডেট করেছি: https://github.com/uxsolutions/bootstrap-datepicker ।

তারপরে আমি জানতে পেরেছিলাম যে তারা এটিকে উড়ানের সরঞ্জামটি খুব সহায়ক সরবরাহ করে, যাতে আপনি আপনার সম্পূর্ণ ডেটপিকারটি কনফিগার করতে পারেন এবং আপনাকে কী সেটিংস ব্যবহার করতে হবে তা দেখতে পারেন।

এই বিকল্পটি আমি কীভাবে খুঁজে পেলাম

defaultViewDate

আমি যে বিকল্পটি খুঁজছিলাম তা হ'ল এবং ওয়েবে অনুসন্ধানের কোনও ফলাফল আমি পাইনি find

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

$('#birthdate').datepicker({
    startView: 2,
    maxViewMode: 2,
    daysOfWeekHighlighted: "1,2",
    defaultViewDate: { year: new Date().getFullYear()-20, month: 01, day: 01 }
});

ডেটপিকারটি খোলার সময় আপনি বর্তমান বছরের তুলনায় 20 বছর আগে বছরগুলি নির্বাচন করতে ভিউ দিয়ে শুরু করবেন।