বুটস্ট্র্যাপের তারিখের সময় চয়নকারীকে সময় অক্ষম করুন


101

আমি আমার ওয়েব অ্যাপ্লিকেশনটিতে বুটস্ট্র্যাপের তারিখের সময় চয়নকারীটি ব্যবহার করছি, পিএইচপি / এইচটিএমএল 5 এবং জাভাস্ক্রিপ্টে তৈরি। আমি বর্তমানে এখান থেকে একটি ব্যবহার করছি: http://tarruda.github.io/bootstrap-datetimepicker/

আমি যখন সময় ব্যতীত নিয়ন্ত্রণটি ব্যবহার করি তখন এটি কার্যকর হয় না। এটি কেবল একটি ফাঁকা পাঠ্য বাক্স দেখায়।

আমি কেবল তারিখের সময় চয়নকারী থেকে সময় সরাতে চাই। এটির জন্য কি কোন সমাধান আছে?

<div class="well">
    <div id="datetimepicker4" class="input-append"> 
        <input data-format="yyyy-MM-dd" type="text"></input> 
        <span class="add-on"> 
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
        </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
        $('#datetimepicker4').datetimepicker({ pickTime: false }); 
    }); 
</script>

4
আপনি যে কোডটি ব্যবহার করছেন তা দয়া করে দেখান, আমরা সকলেই পদার্থবিজ্ঞান নই
স্টিভ

1
সম্পাদনা ব্যবহার করে প্রশ্নের কোড যুক্ত করুন ...
প্রবীণ কুমার পুরুষোথমণ

2
@ স্টিভ আমরা সবাই মানসিক নই, কেবল আমাদের মধ্যে কয়েকজন এক্সডি
টিমো হুভিনেন

আমার জন্য এটি minView:'month'কাজ করেছে, আমি সময় নির্বাচনটি প্রদর্শন করতে চাইনি। আমি তাদের গিথুব সংগ্রহশালা থেকে সহায়তা পেয়েছি। github.com/smalot/bootstrap-datetimepicker/issues/…
সিজলিং কোড

উত্তর:


134

নীচে স্নিপেট পরীক্ষা করুন

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker4'>
                <input type='text' class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {              
           // Bootstrap DateTimePicker v4
           $('#datetimepicker4').datetimepicker({
                 format: 'DD/MM/YYYY'
           });
        });      
    </script>
</div>

ডকুমেন্টেশন এবং অন্যান্য ক্রিয়াকলাপের জন্য আপনি http://eonasdan.github.io/bootstrap-datetimepicker/ উল্লেখ করতে পারেন । এই কাজ করা উচিত.

I18n সমর্থন করার জন্য আপডেট

Moment.js এর স্থানীয় ফর্ম্যাটগুলি ব্যবহার করুন:

  • L শুধুমাত্র তারিখের জন্য
  • LT শুধুমাত্র সময়ের জন্য
  • L LT তারিখ এবং সময় জন্য

Moment.js ডকুমেন্টেশনে অন্যান্য স্থানীয় ফর্ম্যাটগুলি দেখুন ( https://momentjs.com/docs/#/displaying/format/ )


আপনি যে পিকডেট বিকল্পটি উদ্ধৃত করেছেন তা আপনি যে ডকুমেন্টে লিঙ্ক করেছেন তাতে নথিবদ্ধ হয় না।
জেরেমি বার্টন

2
প্রশ্নটি সম্পর্কে উত্তরটি ভুল। প্রশ্নটি ছিল কীভাবে সময়টি নিষ্ক্রিয় করবেন, তারিখটি নয়। এছাড়াও, সম্ভবত কোডটি এখনও কাজ করবে না, যেহেতু এটি পিতামাতার সাথে ডেটপিকারটি সংযুক্ত করে div(সম্ভবত গ্রন্থাগার এটি পরিচালনা করে এবং <input>-সুব-উপাদানগুলির সন্ধান করে)
পিটার ইলফরিচ

12
ইোনাসদানের বুটস্ট্র্যাপ ডেটটাইমপিকারের বর্তমান সংস্করণে পিকডেট এবং পিকটাইম সরানো হয়েছে। পরিবর্তে ফর্ম্যাট ব্যবহার করুন।
gl03

3
এটি ভুল, সেটিং ফর্ম্যাটটি আন্তর্জাতিকীকরণ ভঙ্গ করে
কিকিন-সামা

41

আমি এখানে পোস্ট করা সমস্ত সমাধানের চেষ্টা করেছি কিন্তু সেগুলির কোনওোটাই আমার পক্ষে কাজ করেন নি। আমি আমার jQuery এ কোডের এই লাইনটি ব্যবহার করে সময়টি অক্ষম করতে পেরেছি:

$('#datetimepicker4').datetimepicker({
    format: 'YYYY-MM-DD'
});

এটি কেবলমাত্র তারিখে ফর্ম্যাটটি সেট করে এবং সময়টিকে পুরোপুরি অক্ষম করে। আশাকরি এটা সাহায্য করবে.


5
এই পৃষ্ঠার সমস্ত সমাধানগুলির মধ্যে, এটি কেবলমাত্র আমার পক্ষে কাজ করেছিল। বুটস্ট্র্যাপ-ডেটটাইমপিকার লাইব এর v4.7.14 ব্যবহার করা।
জোশ বুখিয়া

2
ঠিক একইরকম কয়েকটি নামকরণ করা ডেটটাইম পিকার বলে মনে হচ্ছে যেহেতু কোনও বিভ্রান্তি এড়াতে, আমি উল্লেখ করব যে এটি এই বিশেষ প্লাগইনটির জন্য আমার পক্ষে কাজ করেছে: eonasdan.github.io/bootstrap-datetimepicker
পল ক্যালাব্রো

ধন্যবাদ, এটি আমার পক্ষে কাজ করেছে, তবে, আমার ফর্মটি এখনও সময়-বাছাইকারীটিতে স্যুইচ করার জন্য আইকনটি দেখায় এবং এটি আপনাকে স্যুইচ করতে দেয়, তারপরে 00:00 দেখায়। এটি ফর্মের সাথে জমা দেওয়া যাবতীয় পরিবর্তন করে না, তবে ঘড়ির আইকনটি সরানোর কোনও উপায় আছে যাতে ব্যবহারকারী ফর্মের সময় চয়নকারী অংশটি অ্যাক্সেস করতে না পারে? আবার ধন্যবাদ!
jackerman09

আপনার অবশ্যই ডেটটাইমপিকারের একটি আলাদা সংস্করণ ব্যবহার করা উচিত কারণ সময়টি আইকনটি আমার গায়েব হয়ে গেছে।
সেল্ট

26

এটি এর জন্য: ইোনাসদানের বুটস্ট্র্যাপ ডেটটাইমপিকার er

প্রথমে আমি এর idজন্য একটি বৈশিষ্ট্য সরবরাহ করব <input>এবং তারপরে সরাসরি <input>(এবং প্যারেন্ট পাত্রে নয়) ডেটটাইম পিকার শুরু করব :

<div class="container">
  <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
  $(function() {
    // Bootstrap DateTimePicker v3
    $('#datetimepicker').datetimepicker({
      pickTime: false
    });
    // Bootstrap DateTimePicker v4
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY'
    });
  });
</script>

ভি 3 এর জন্য: সিকে মৌর্যর জবাবের বিপরীতে :

  • pickDate: false তারিখটি অক্ষম করবে এবং কেবল একটি সময় বাছাই করার অনুমতি দেবে
  • pickTime: false সময়টি অক্ষম করবে এবং কেবল একটি তারিখ বাছাই করার অনুমতি দেবে (যা আপনি চান)।

ভি 4-র জন্য: বুটস্ট্র্যাপ ডেটটাইম পিকার এখন সময়-উপাদান উপস্থিত রয়েছে কিনা তা নির্ধারণ করতে ফর্ম্যাটটি ব্যবহার করে। যদি কোনও সময় উপাদান উপস্থিত না থাকে তবে এটি আপনাকে একটি সময় বাছাই করতে দেয় না (এবং ঘড়ির আইকনটি লুকিয়ে রাখবে)।


কেন এটিকে ভোট দেওয়া হয়েছিল? এটিই একমাত্র উত্তর যা সঠিকভাবে ব্যাখ্যা করে যে সর্বশেষতম সংস্করণে প্লাগইনটির বিকল্প পরিবর্তিত হয়েছে। এই শীর্ষ উত্তর থাকলে আমাকে কয়েক মিনিটের বিভ্রান্তি থেকে বাঁচাতে পারত।
gl03

1
এটি কাজ করার জন্য এটি ক্যাপিটালস তারিখ হতে হবে, আশ্চর্যজনকভাবে
সিডোনাল্ডসন

হ্যাঁ, জাভাস্ক্রিপ্টে তারিখের ফর্ম্যাটটি কীভাবে নির্দিষ্ট করা হয়েছে ঠিক সেভাবেই (জাভাতে তারিখ / সময় বিন্যাসের সংজ্ঞা দেওয়া বিপরীতে)। আমাকে কিছুটা সময় নিয়েছিল তাও খুঁজে বের করতে।
পিটার Ilfrich

ধন্যবাদ, এটি আমার পক্ষে কাজ করেছে, তবে, আমার ফর্মটি এখনও সময়-বাছাইকারীটিতে স্যুইচ করার জন্য আইকনটি দেখায় এবং এটি আপনাকে স্যুইচ করতে দেয়, তারপরে 00:00 দেখায়। এটি ফর্মের সাথে জমা দেওয়া যাবতীয় পরিবর্তন করে না, তবে ঘড়ির আইকনটি সরানোর কোনও উপায় আছে যাতে ব্যবহারকারী ফর্মের সময় চয়নকারী অংশটি অ্যাক্সেস করতে না পারে? আবার ধন্যবাদ!
jackerman09

jackerman09, দয়া করে আপনার ব্যবহারের ডেটটাইম পিকারের সংস্করণ সম্পর্কে সচেতন হন। বর্ণিত আচরণটি এওনসদানের ডেটটাইম পিকার v3, v4 এর ক্ষেত্রে প্রযোজ্য। আপনি যদি সর্বশেষটি (যা আপনার উচিত) ব্যবহার করছেন তবে ফর্ম্যাটে কোনও সময় উপাদান না থাকায় স্বয়ংক্রিয়ভাবে ঘড়ির আইকন সরিয়ে ফেলা হবে। এবং দয়া করে একাধিক
উত্তরে

20

আপডেটের কারণে এটি বের করার চেষ্টা করতে আমি কিছু সময় ব্যয় করেছি DateTimePicker। আপনি moment.js ডকুমেন্টেশন অফ অফ ভিত্তিতে একটি ফর্ম্যাট প্রবেশ করবে । অন্যান্য উত্তরগুলি যা দেখিয়েছিল তা আপনি ব্যবহার করতে পারেন:

$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });

অথবা আপনি স্থানীয় রূপের কিছু মুহূর্ত ব্যবহার করতে পারেন moment.js কেবল একটি তারিখ করার জন্য সরবরাহ করে যেমন:

$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });

এটি ব্যবহার করে, আপনি লোকালের উপর ভিত্তি করে কেবলমাত্র একটি সময় ( LT) বা তারিখ ( L) প্রদর্শন করতে পারবেন । ডেটটাইম পিকারের জন্য ডকুমেন্টেশনটি আমার কাছে পরিষ্কার ছিল না যে এটি moment.jsফর্ম্যাটটির মাধ্যমে স্বয়ংক্রিয়ভাবে সরবরাহ করা ইনপুট (তারিখ বা কেবলমাত্র সময়) রূপান্তর করে। আশা করি এটি এখনও যারা খুঁজছেন তাদের জন্য এটি সহায়তা করে।


4
এটি সেরা উত্তর, কারণ এটিতে "হার্ডকডিং" ফর্ম্যাটটির পরিবর্তে লোকেল-নির্ভর বিন্যাস অন্তর্ভুক্ত রয়েছে।
নাহ্ন

17
$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

এটি আপনার জন্যও কার্যকর হয় কিনা চেষ্টা করুন


একটি কবজ মত কাজ করে :) অনেক অনেক ধন্যবাদ। আমি কি জিজ্ঞাসা করতে পারি মিনিভিউ সেটিংটি কী? এই সেটিংটি সহ, সময় দেখানো হয়।
ফ্রেনকিবি

আমি জানি না তবে আমার কাছে এই সমস্যাটিও রয়েছে এবং এই কোডটির জন্য এর সমাধানও রয়েছে।
ইমভাভিন 95

আপনার বক্তব্যটি ঠিক ছিল, এখানে আরও কিছু: github.com/smalot/bootstrap-datetimepicker/issues/416
ফ্রেনকিবি

পারফেক্ট! লোকেলটি না ভাঙতে, ব্যবহার করুন:$('#datetimepicker').datetimepicker({ minView: 2, pickTime: false, language: 'pt-BR' });
অ্যালাইন ম্যাটোস

6

আপনার ডেটটাইম পিকারটি এভাবে শুরু করুন

অক্ষম সময় জন্য

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickTime: false
    });
});

অক্ষম তারিখের জন্য

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickDate: false
    });
});

তারিখ এবং সময় উভয় অক্ষম করতে

$(document).ready(function(){
   $("#dp3").datetimepicker('disable'); 
});

আপনার যদি সন্দেহ থাকে তবে দয়া করে নীচের ডকুমেন্টেশনটি উল্লেখ করুন

http://eonasdan.github.io/bootstrap-datetimepicker/#options


6
<div class="container">
  <input type="text" id="datetimepicker"/>
</div>

<script type="text/javascript">
  $(function() {
    // trigger datepicker
    $('#datetimepicker').datetimepicker({
       pickTime: false,
        minView: 2,
        format: 'dd/mm/yyyy',
        autoclose: true,
    });
  });
</script>

5

এটি কেবল তারিখটি দেখায়:

$('#myDateTimePicker').datetimepicker({
        format: 'dd.mm.yyyy',
        minView: 2,
        maxView: 4,
        autoclose: true
      });

এখানে বিষয় সম্পর্কে আরও


2
    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });

1

নির্বাচক মানদণ্ড এখন ডিআইভি ট্যাগের একটি বৈশিষ্ট্য।

উদাহরণগুলি হ'ল ...

data-date-format="dd MM yyyy" 
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"

সুতরাং ডিডি মিমি ইয়াইয়ের বুটস্ট্র্যাপ উদাহরণটি হ'ল: -

<div class="input-group date form_date col-md-5" data-date="" 
    data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>

আমার জাভাস্ক্রিপ্ট সেটিংস নিম্নরূপ: -

            var picker_settings = {
                language:  'en',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

আপনি বুটস্ট্র্যাপ-ডেটটাইমপিকিকার-মাস্টার ফাইলটি ডাউনলোড করলে এগুলির কার্যকারী উদাহরণগুলি দেখতে পাবেন। একটি সূচিপত্র সহ প্রতিটি নমুনা ফোল্ডার রয়েছে।


1

বুটস্ট্র্যাপ 4 সংস্করণের জন্য এই কোডটি কাজ করছে;

$('#payment-date-time-select').datetimepicker({
    startView:2,
    minView:2,
});

0

বুস্ট্র্যাপ ডেটটাইম পিকারে সময় অক্ষম করুন ...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "dd-mm-yy",
        });
    });

বুস্ট্র্যাপ ডেটটাইম চয়নকারীতে তারিখটি অক্ষম করুন ...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "HH:mm A",
        });
    });

0
your same code work's fine, just add some link reference

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
              href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </div> 

        <script type="text/javascript"
                src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
                src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({pickTime: false});
            });
        </script>

    </body>
    </html>


0

এটি ইনপুট ক্ষেত্রে সময় দেখানোর অনুমতি দেয় তবে সময় পিকারের বোতামটি গোপন করে, যা অ্যাকর্ডিয়নে দ্বিতীয় লি উপাদান

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}

-1

আমি জানি এটি দেরি হয়ে গেছে, তবে উত্তরটি কেবল শব্দ থেকে "সময়" সরিয়ে দিচ্ছে, এতে datetimepickerপরিবর্তন করা datepicker। আপনি এটি দিয়ে ফর্ম্যাট করতে পারেন dateFormat

      jQuery( "#datetimepicker4" ).datepicker({
        dateFormat: "MM dd, yy",
      });

আপনি কেন আমার মন্তব্যে দিমিত্রি ডিন্ট্রি করেছেন তা আমি নিশ্চিত নই কারণ এটি পোস্টারের প্রশ্নের উত্তর দেয়। বিভিন্ন তারিখের ফর্ম্যাট রয়েছে এমন বিষয়টি প্রশ্নের সাথে প্রাসঙ্গিক নয় এবং কেবল এখানে উদাহরণ হিসাবে দেখানো হয়েছে।
ভোর সবুজ

-1

আপনার জন্য সমাধান এখানে। এই জাতীয় কোড যুক্ত করা খুব সহজ:

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    }); 

-3
 $("#datetimepicker4").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: 'YYYY-MM-DD'
});

-3

সময় এবং ভাষা হিসাবে একবারে আমি এটি রেখেছি এবং কাজ করি না

$(function () {
    $('#datetimepicker2').datetimepicker({
              locale: 'es',
              pickTime: false
          });
});

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