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.