jQuery তারিখ চয়নকারী - অতীতের তারিখগুলি অক্ষম করুন


91

আমি ইউআই তারিখ চয়নকারীটি ব্যবহার করে একটি তারিখের সীমা নির্বাচন করার চেষ্টা করছি।

ক্ষেত্র থেকে / ক্ষেত্রের মধ্যে লোকেরা বর্তমান দিনের আগের তারিখগুলি দেখতে বা নির্বাচন করতে সক্ষম হবে না।

এটি আমার কোড:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

কেউ কি আমাকে বলতে পারে যে কীভাবে বর্তমান তারিখের আগের তারিখগুলি অক্ষম করতে হয়।

উত্তর:


114

আপনাকে অবশ্যই একটি নতুন তারিখের অবজেক্ট তৈরি করতে হবে এবং minDateডেটপিকারগুলি শুরু করার সময় সেটিকে সেট করতে হবে

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

সম্পাদনা করুন - আপনার মন্তব্য থেকে এখন এটি প্রত্যাশিত হিসাবে কাজ করে http://jsfiddle.net/nicolapeluchetti/dAyzq/1/


4
আমি এমন একটি উপায়ে বাস্তবায়ন করতে চাই যাতে লোকেরা অতীতের কোন তারিখ বেছে নিতে সক্ষম না হয় .. যেমন গতকালের আগের দিন ইত্যাদি কেবল আজ থেকে এবং পরে।
হর্ষ এমভি

4
@ হারশাএমভি আমি আমার উত্তর আপডেট করেছি, আপনি ডেটপিকারদের সূচনা করার সময় আপনার মিনিটেট সেট করা উচিত
নিকোলা পেলুচেটি

আপনি showAnim:"",যখন আপনার নির্বাচন করবেন তখন বিরক্তিকর মাস এবং বছর পরিবর্তন করার জন্য আপনি ডেটপিকারের সেটিংসে যুক্ত করতে পারেন।
মিসিউ

আমি আপনার স্ক্রিপ্টটি ব্যবহার করেছি তবে আমি "ত্রুটিযুক্ত রেফারেন্স এরিয়ার: defined সংজ্ঞায়িত করা হয়নি" ত্রুটি পাচ্ছি। আমি এই কিভাবে ঠিক করব?
মার্বেল জর্জে

পছন্দ করুন আমি চেষ্টা করেছি কিন্তু এটি কাজ করছে না, আমার কি কোনও নির্দিষ্ট পরিবর্তন করা উচিত? অগ্রিম ধন্যবাদ
wolfQueen

74

ডেটটোডে ভেরিয়েবল ঘোষণা করুন এবং সেট করার জন্য তারিখ () ফাংশনটি ব্যবহার করুন .. তারপরে সেই পরিবর্তনশীলটি মিনিডেটে বরাদ্দ করতে ব্যবহার করুন যা ডেটপিকারের প্যারামিটার।

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

এটাই ... উপরের উত্তরটি সত্যিই সহায়ক ছিল ... এটি ছেলেরা রাখুন ..


পরিষ্কার ও সরল উত্তর .. ধন্যবাদ
ASD


20

সর্বাধিক অনুমোদিত অনুমোদিত তারিখ সীমাবদ্ধ করতে "মিনিডেট" বিকল্পটি ব্যবহার করুন। "0" মানটির অর্থ আজ (আজ থেকে 0 দিন):

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

এখানে ডক্স: http://api.jqueryui.com/datepicker/#option-minDate


8

শুধু এটি যুক্ত করতে:

যদি আপনাকে অতীতে কোনও ম্যানুয়ালি একটি তারিখ টাইপ করতে বাধা দেওয়ার প্রয়োজন হয় তবে এটি একটি সম্ভাব্য সমাধান। এটিই আমরা শেষ করেছি (@ নিকোলা পেলুচেটির উত্তরের ভিত্তিতে)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

এটি যা করে তা হ'ল আজকের তারিখে মানটি পরিবর্তন করা যদি ব্যবহারকারী অতীতে ম্যানুয়ালি একটি তারিখ টাইপ করে।


6

লাইভ ডেমো , এটি চেষ্টা করুন,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

5

এটি এটি করার সহজ উপায়

$('#datepicker').datepicker('setStartDate', new Date());

এছাড়াও আমরা ভবিষ্যতের দিনগুলি অক্ষম করতে পারি

$('#datepicker').datepicker('setEndDate', new Date());

4
ধন্যবাদ! আপনি হতাশার কয়েক ঘন্টা বন্ধ।
lmiguelvargasf

4

ডেটপিকারের স্টার্টডেট অ্যাট্রিবিউট সেট করুন, এটি কাজ করে, নীচে ওয়ার্কিং কোড

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

3

সেট করে startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

2

jQuery এপিআই ডকুমেন্টেশন - তারিখ চয়নকারী

সর্বনিম্ন নির্বাচনের তারিখ। যখন সেট করা থাকে null, কোনও ন্যূনতম থাকে না।

একাধিক প্রকার সমর্থিত:

তারিখ: একটি তারিখ অবজেক্ট যাতে সর্বনিম্ন তারিখ থাকে।
সংখ্যা: আজ থেকে বেশ কয়েকটি দিন। উদাহরণস্বরূপ আজ থেকে 2প্রতিনিধিত্ব two daysকরে এবং -1উপস্থাপন করে yesterday
স্ট্রিং:dateFormat বিকল্প দ্বারা সংযুক্ত ফর্ম্যাটটিতে একটি স্ট্রিং বা একটি আপেক্ষিক তারিখ।
আপেক্ষিক তারিখগুলিতে অবশ্যই মান এবং সময়কাল জুটি থাকতে হবে; বৈধ সময়সীমার হয় yজন্য years, mজন্য months, wজন্য weeks, এবং dজন্য days। উদাহরণস্বরূপ, থেকে +1m +7dপ্রতিনিধিত্ব one month and seven daysকরেtoday

আজ বাদে পূর্ববর্তী তারিখগুলি প্রদর্শন না করার জন্য

$('#datepicker').datepicker({minDate: 0});

2

" মাইন্ডেট " বৈশিষ্ট্যটি jquery ডেটপিকারে পাসের তারিখগুলি অক্ষম করতে ব্যবহার করা উচিত।

মিনিটেট: নতুন তারিখ () বা মিনিটেট: '0' এটির জন্য কী।

Ex:

$(function() {
    $( "#datepicker" ).datepicker({minDate: new Date()});
});

বা

$(function() {
  $( "#datepicker" ).datepicker({minDate: 0});
});

2

শুধু আপনার কোড প্রতিস্থাপন:

পুরানো কোড:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

নতুন কোড:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

1

আমি পূর্ববর্তী তারিখটি অক্ষম করার জন্য ফাংশন তৈরি করেছি, নমনীয় উইকএন্ডের দিনগুলি (শনিবার, রবিবারের মতো) অক্ষম করব

আমরা jQuery UI ডেটপিকার প্লাগইন এর আগে শোডে পদ্ধতি ব্যবহার করছি

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

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

এখানে আজকের তারিখ 15 সেপ্টেম্বর। আমি শনিবার এবং রবিবার অক্ষম করেছি।


0

আপনাকে বর্তমান তারিখটিকে এই জাতীয় ভেরিয়েবলে ঘোষণা করতে হবে

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})


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