[英]bootstrap datepicker fixed at the top of the page
I'm making a form that has a date picker, I'm using bootstrap datepicker
我正在制作一个带有日期选择器的表单,我正在使用
bootstrap datepicker
In addition, the main bootstrap field should be hidden, I have three of my own fields, when you click on any of them, the calendar should open, now everything works, the calendar opens, but is fixed at the top of the page.另外,主引导字段应该被隐藏,我有三个我自己的字段,当你点击其中任何一个时,日历应该打开,现在一切正常,日历打开,但固定在页面顶部。 Can I make it open near the fields?
我可以让它在田野附近开放吗?
// Initialize datepicker const dp = $("#datepicker").datepicker({ todayHighlight: true }); // Show datepicker on <input> click $('.input-wrapper > input').on('click', (e) => dp.datepicker("show")); // On date change const y = document.getElementById('year'); const m = document.getElementById('month'); const d = document.getElementById('day'); dp.on('changeDate',function(ev){ const date = dp.datepicker('getDate'); y.value = date.getFullYear(); d.value = date.getDate(); m.value = date.getMonth() + 1; dp.datepicker('hide') })
label { color: #808694; font-family: Montserrat; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; } input { margin-right: 20px; box-sizing: border-box; outline: none; border: none; background-color: #F4F5F8; width: 50px; }.span-wrapper { display: flex; align-items: flex-end; } span { color: #808694; font-family: Montserrat; font-size: 8px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; text-align: center; width: 50px; }.main-content { min-height: 150vh; }.call-form-item-date { margin-top: 150px; margin-bottom: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div class="main-content"> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> </div> <div class="contacts-call-form"> <form class="js-form" action="{{ route('send-comment') }}"> <div class="col-md-6"> <div class="call-form-item-date"> <label for="date">Select a date *</label> <div class="input-wrapper"> <input class="js-form-month" id="month" type="text" name="month"> <input class="js-form-day" id="day" type="text" name="day"> <input class="js-form-year" id="year" type="text" name="year"> <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> <div class="span-wrapper"> <span for="month">Month</span> <span for="day">Day</span> <span for="year">Year</span> </div> </div> </div> </form> </div>
If you want to display date picker near the inputs you should initialize it with id of date inputs like month.如果您想在输入附近显示日期选择器,您应该使用日期输入(如月份)的 id 对其进行初始化。
// Initialize datepicker const dp = $("#month").datepicker({ todayHighlight: true }); // Show datepicker on <input> click $('.input-wrapper > input').on('click', (e) => dp.datepicker("show")); // On date change const y = document.getElementById('year'); const m = document.getElementById('month'); const d = document.getElementById('day'); dp.on('changeDate',function(ev){ const date = dp.datepicker('getDate'); y.value = date.getFullYear(); d.value = date.getDate(); dp.datepicker('hide'); m.value = date.getMonth() + 1; }) dp.on('hide',function(ev){ const date = dp.datepicker('getDate'); m.value = date.getMonth() + 1; })
label { color: #808694; font-family: Montserrat; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; } input { margin-right: 20px; box-sizing: border-box; outline: none; border: none; background-color: #F4F5F8; width: 50px; }.span-wrapper { display: flex; align-items: flex-end; } span { color: #808694; font-family: Montserrat; font-size: 8px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; text-align: center; width: 50px; }.main-content { min-height: 150vh; }.call-form-item-date { margin-top: 150px; margin-bottom: 150px; }.input-wrapper{ position: relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div class="main-content"> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> </div> <div class="contacts-call-form"> <form class="js-form" action="{{ route('send-comment') }}"> <div class="col-md-6"> <div class="call-form-item-date"> <label for="date">Select a date *</label> <div class="input-wrapper"> <div id="datepickerContainer"></div> <input class="js-form-month" id="month" type="text" name="month"> <input class="js-form-day" id="day" type="text" name="day"> <input class="js-form-year" id="year" type="text" name="year"> <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> <div class="span-wrapper"> <span for="month">Month</span> <span for="day">Day</span> <span for="year">Year</span> </div> </div> </div> </form> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.