মডেল উইন্ডোর মধ্যে টুইটার বুটস্ট্র্যাপ ডেটপিকার

Question 1

আমি বর্তমানে টুইটার বুটস্ট্র্যাপ কাঠামো ব্যবহার করছি এবং মডেল উইন্ডোজগুলি ব্যবহার করার সময় ডেটপিকার বা বৈধকরণের মতো কাজ করার জন্য আমি জেএস উপাদানগুলি পেতে পারি না, যদিও নির্বাচিত এবং অভিন্ন রেন্ডার সঠিকভাবে দেওয়া হয়। নীচে আমার মডেল উইন্ডো দেখুন:

  <div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h3>New Member Form</h3>
        </div>
        <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
          <div class="modal-body">
            <div class="widget-content nopadding">
              <div class="control-group">
                <label class="control-label" for="user_role">Role</label>
                <div class="controls">
                  <select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
                  <option value="1">Player</option>
                  <option value="2">Coach</option>
                  <option value="3">Parent</option>
                  <option value="4">Manager</option>
                  <option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_full_name">Full name</label>
                <div class="controls">
                  <input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_last_name">Last name</label>
                <div class="controls">
                  <input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_email">Email</label>
                <div class="controls">
                  <input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_date_of_birth">Date of birth</label>
                <div class="controls">
                  <input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_gender">Gender</label>
                <div class="controls">
                  <select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option>
                  <option value="Male">Male</option>
                  <option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_team">Team</label>
                <div class="controls">
                  <select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option>
                  <option value="4">Metro 3 East</option>
                  <option value="1">State League 3</option>
                  <option value="2">State League 4</option>
                  <option value="3">Metro 3 South</option>
                  <option value="5">Pennant E</option>
                  <option value="6">Under 9 White</option>
                  <option value="7">Under 9 Navy</option>
                  <option value="8">Under 13 Pennant South East</option>
                  <option value="9">Under 17 Pennant South East</option>
                  <option value="10">Under 15 South (1)</option>
                  <option value="11">Under 11 Pennant South East</option>
                  <option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_mobile">Mobile</label>
                <div class="controls">
                  <input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel">
                  <span class="help-block">
                    <input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                    <a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_manager_access">Manager access</label>
                <div class="controls">
                  <input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_admin_access">Admin access</label>
                <div class="controls">
                  <input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="pull-right">
              <input class="btn btn-primary" name="commit" type="submit" value="Create User">
              <a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a>
            </div>
          </div>
        </form>
      </div>

Question 2

ক্লাস ডেটপিকারে 1051 এর উপরে জেড-ইনডেক্স যুক্ত করুন

পৃষ্ঠা বা সিএসএসে এই জাতীয় কিছু যুক্ত করুন

<style>
.datepicker{z-index:1151 !important;}
</style>

Question 3

আমার জন্য এটি কেবল CSS এর সাথে গুরুত্বপূর্ণ!

.datepicker {z-index: 1151 !important;}

Question 4

আমি ব্যবহার করি:

body.modal-open .datepicker {
    z-index: 1200 !important;
}

এইভাবে: যদি মডেলটি খোলা না থাকে এবং আপনি চান যে ডেটপিকারটি সাধারণ জেড-সূচকে থাকে (আমার ক্ষেত্রে আমার এটির দরকার ছিল মেনু ড্রপ-ডাউনের অধীনে, যার 1000 এর জেড-সূচক থাকে), এটা কাজ করে।

তাহলে মোডাল হল খোলা, datepicker, মোডাল Z-ইনডেক্স (1040 বা 1050) বেশি হতে তাই ব্যবহার প্রয়োজন body.modal-openনির্বাচক।

আমি বুটস্ট্র্যাপ ব্যবহার করছি 3.1.1

Question 5

Http://www.daterangepicker.com/ অনুযায়ী (বিকল্পগুলি)

$('#dispatch_modal').on('shown.bs.modal', function() {
     $('input:text:visible:first').focus();
     // prepare datepicker
     $('.form_datepicker').daterangepicker({
          singleDatePicker: true,
          showDropdowns: true,
          parentEl: '#dispatch_modal'   
     });
});

`

প্যারেন্টএল আমার সমস্যার সমাধান করেছে ...

Question 6

ইউআই-ডেটপিকারে ক্লাসে জেড-ইনডেজ যুক্ত করুন

<style>
    .ui-datepicker{ z-index:1151 !important; }
</style>

Question 7

যেমনটি এমসিসিএএনএফ তার মন্তব্যে বলেছেন :

আমি আপনাকে আপনার বুটস্ট্র্যাপ সিএসএস এবং জেএসটি দেখার পরামর্শ দিচ্ছি। আপনার মডেলটি খুব বেশি জেড-ইনডেক্স মান (99999) এ সেট করা হচ্ছে। উপরে আমার jsfiddle আপনার সাথে তুলনা করুন

Question 8

এই টুকরা কোড দিয়ে চেষ্টা করুন।

.ui-datepicker{ z-index:1151 !important; }

আপনি বুটস্ট্র্যাপ ভি 3 ব্যবহার করার সময় সমস্যার সমাধান করবে

Question 9

আমি মনে করি প্লাগইনে লজিক্যাল ফাংশন পরিবর্তন করা ভাল। প্রায় 552 সারিতে আমি এটি পরিবর্তন করি:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index'))+10;

এটিতে:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index')) + 10 * 1000; //think is enought

Question 10

আমি এই ত্রুটি ছিল, কারণ আমি নীচে স্ক্রোল। ডেটপিকারের স্থির স্থানে ভুল শীর্ষ অবস্থান ছিল। আমি এটি এখন যেমন ব্যবহার করি:

$('#myModal').on('show.bs.modal', function (e) {
            $(document).scrollTop(0);
});

এবং এখন এটি কাজ করে।

Question 11

আপনি কি আপনার সিএসএস ফাইল পরিবর্তন করতে পারেন? bootstrap-timepicker/css/bootstrap-timepicker.css

থেকে

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
}

প্রতি

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}

Question 12

আপনি যদি বুটস্ট্র্যাপ ভি 3 ব্যবহার করেন তবে এটি ব্যবহার করে দেখুন।


    .bootstrap-datetimepicker-widget 
    {
        z-index: 1200   !important;
    }

Question 13

বুটস্ট্র্যাপ 3.x এবং এস টেমপ্লেট র্যাপবুটস্ট্র্যাপের জন্য

একটি মডেলের ভিতরে ডেটপিকার এবং টাইমপিকার

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>

Question 14

$('#effective_to').datepicker({
    dateFormat: "dd-mm-yyyy",
    changeMonth: true,
    changeYear: true,
    beforeShow: function() { 
        $('#ui-datepicker-div').addClass('datepicker');
    }
});

সিএসএস

.datepicker {
    z-index: 100000 !important;
    display: block;
}

এটি আমার গঠন করে। যদিও আমি অ্যাজ্যাক্সের মাধ্যমে মডেল কল করেছি

Question 15

এই সমাধানগুলি আমার জন্য বুটস্ট্র্যাপ মডেলের শীর্ষে ডেটপিকারটি রেন্ডার করার জন্য পুরোপুরি কাজ করেছিল।

http://jsfiddle.net/cmpgtuwy/654/

এইচটিএমএল

<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />  
<span class="input-group-addon">
  <span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>

জাভাস্ক্রিপ্ট

$('#dtp').datetimepicker({
format: 'MMM D, YYYY',
widgetParent: 'body'});


$('#dtp').on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
      else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

সিএসএস

.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}

Question 16

জেড-ইনডেক্স মান .modalএবং জেড-ইনডেক্স মানের .modal-backdropচেয়ে কম পরিবর্তনের চেষ্টা করুন .datepicker।

Question 17

বুটসট্র্যাপ ক্যালেন্ডারের জন্য এটি ব্যবহার করুন

/ ক্যালেন্ডার সূচক সিএসএস /

.bootstrap-datetimepicker-widget {
   z-index:99999 !important;
}

Question 18

এটি আমার জন্য কাজ করে এই কোডটি ব্যবহার করার চেষ্টা করুন। যেভাবে এটি এই সাইট থেকে এসেছে https://github.com/eternicode/bootstrap-datepicker/issues/464 ।

$('#datepicker').datepicker().on('show', function () {
                var modal = $('#datepicker').closest('.modal');
                var datePicker = $('body').find('.datepicker');
                if (!modal.length) {
                    $(datePicker).css('z-index', 'auto');
                    return;
                }
                var zIndexModal = $(modal).css('z-index');
                $(datePicker).css('z-index', zIndexModal + 1);
            });

Question 19

Fww। নেক্রো কিন্তু এখনও।

জন্য <link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

আমার দরকার ছিল

<style type="text/css">
.ui-timepicker-container {z-index: 1151 !important;}
</style>

ওভাররাইডটি স্বীকার করার জন্য দস্তাবেজের শিরোনামে

আমি এটির আশ্রয় নেওয়ার আগে এখানে অন্যান্য সমস্ত সমাধানের চেষ্টা করেছি।

Question 20

// re initialze datepicker
$(".bootstrap-datepicker").bsdatepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
}).on('changeDate', function (ev) {
    $(this).bsdatepicker('hide');
});
//
$(".dropdown-menu").css({'z-index':'1100'});

Question 21

এটা চেষ্টা কর

#ui-datepicker-div {
  z-index: 100000;
}

Question 22

আমাকে সাহায্য করতে দাও তোমাকে,

আপনি আপনার bootstrap.min.css আপডেট করতে পারেন

ক্লাস ড্রপডাউন-মেনুতে আপনি জেড-ইনডেক্সের মান 2000 এ পরিবর্তন করতে পারেন

তাই ডেটপিকার দেখানো হবে

Question 23

আপনার ডেটাপিকার জাভাস্ক্রিপ্ট কোডটি ভিতরে rapেকে রাখুন

function pageLoad() {}