pamela rizk
asked on
Calendar bootstrap datetimepicker
dear all
i have a calendar control design as below in asp web application designed as below:
attached files represents the styles used.
my issue is when using this calendar inside a collapsible panel calendar issue design screenshot will be shown .
Please help
bootstrap-datetimepicker.css
bootstrap-iso.css
Calendar-design-issue.png
i have a calendar control design as below in asp web application designed as below:
<%@ Control Language="vb" AutoEventWireup="true" CodeBehind="UC_Calendar_New_js.ascx.vb" Inherits="SocrateDotNet.SocWebUserControl_Common_UCs_N_UC_Calendar_New_js" %>
<link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/Styles/bootstrap-iso.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/Styles/bootstrap-datetimepicker.css") %>" />
<link rel="shortcut icon" type="text/css" href="<%= ResolveUrl("~/fonts/glyphicons-halflings-regular.ttf") %>" />
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/moment.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/moment-with-locales.js") %>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/bootstrap-datetimepicker.js") %>"></script>
<div runat="server" id="div_main" class="bootstrap-iso" >
<div class="container" style="width: 100%">
<table style="border-spacing: 0px; width: 100%">
<tr>
<td style="width: 99%" id="td_date" runat="server">
<div class="row" style="width: 100%">
<div class='col-sm-6' style="width: 100%; padding-left: 0px; padding-right: 0px">
<div class="form-group" style="width: 100%;">
<%-- input-append date--%>
<asp:TextBox ID="Txt_Date" runat="server" class="form-control" Width="100%" />
</div>
</div>
</div>
</td>
<td style="width: 1%" id="td_mandatory" runat="server">
<asp:Label ID="lbl_mandatory" runat="server" CssClass="labelsStyle_N"
Text="*" ForeColor="Red" Style="float: left">
</asp:Label>
</td>
</tr>
</table>
</div>
</div>
<asp:HiddenField ID="hdn_date" runat="server" />
<script type="text/javascript">
//var onUc_calendarLoad = function () {
$(document).ready(function () {
EndRequestHandler();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//$(function () {
var userLang = navigator.languages[0];
var timestampdate = $("#<%=hdn_date.ClientID%>").val();
var selecteddate = new Date(parseInt(timestampdate));
var today_resource = escape("<%=GetGlobalResourceObject("SocResources", "Today")%>");
set_today_local(today_resource);
$('#<%=Txt_Date.ClientID %>').datetimepicker({
//isRTL: true,
locale: userLang,
showTodayButton: true,
format: 'l',
keepOpen: false,
date: selecteddate
});
$('#<%=Txt_Date.ClientID %>').on('dp.hide', function (e) {
//var olddate = moment(e.oldDate).format('LL');
var newdate = moment(e.date).format('ll');
$("#<%=Txt_Date.ClientID %>").attr('title', newdate);
var d = new Date(e.date.toDate());
var timestamp_time = d.getTime();;//e.timeStamp;
$("#<%=hdn_date.ClientID%>").val(timestamp_time);
});
}
});
</script>
attached files represents the styles used.
my issue is when using this calendar inside a collapsible panel calendar issue design screenshot will be shown .
Please help
bootstrap-datetimepicker.css
bootstrap-iso.css
Calendar-design-issue.png
ASKER
any news?
As this is really a front end issue, it will help us if you can render your html (surf the page and view source) and post that or better yet, provide a link to your page or recreate the html/css/js portion in jsfiddle, jsbin or codepen.
ASKER
i cannot please help
ASKER
i already give you all the datetime control so you have all needed details
In order to help, we have to view a sample page. It will be a little bit of work on your part but it will help us give you an answer.
> i already give you all the datetime control so you have all needed details
That is serverside, this is a front end issue.
That is serverside, this is a front end issue.
ASKER
i wil create a simle page and give you its content so you can check
ASKER
but even if i prepare a whole page it is the same becasue you alreay have all the code
ASKER
i will have tocreate a page and drag and drop the content of the user control inside that 's it
so why you need more detials
so why you need more detials
Pamela, the code you are providing is a combination of ASP, HTML, CSS and JS. The ASP code as is does not contain the full html until it is run. Since this is a front end issue, we need to see the page rendered in full html. Once we have the fix, you can figure out where the issue is coming from in asp or html/js.
AS you know, it takes time to create a working sample and that is something you will need to provide.
AS you know, it takes time to create a working sample and that is something you will need to provide.
ASKER
is the attached screenshot enough for you
Untitled.png
Untitled.png
No
Hi,
you can adjust the widget position
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
Here is a jsfiddle with more complex css adjustment
http://jsfiddle.net/lenamtl/dwjng8kh/
Bootstrap usually auto adjust the content but sometimes depending of your custom CSS it's get hidden.
I do prefer this one (but it's not having the time feature) https://github.com/uxsolutions/bootstrap-datepicker
https://uxsolutions.github.io/bootstrap-datepicker/
you will see there is a position option which is easier to set to my opinion
you can adjust the widget position
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
Here is a jsfiddle with more complex css adjustment
http://jsfiddle.net/lenamtl/dwjng8kh/
Bootstrap usually auto adjust the content but sometimes depending of your custom CSS it's get hidden.
I do prefer this one (but it's not having the time feature) https://github.com/uxsolutions/bootstrap-datepicker
https://uxsolutions.github.io/bootstrap-datepicker/
you will see there is a position option which is easier to set to my opinion
ASKER
dear Mr Lenamtl
thank you for your explanation
but i don'tget where is teh problem is the code that i alredy sent?
thank you for your explanation
but i don'tget where is teh problem is the code that i alredy sent?
@pamela rizk to check the issue, provided information is not sufficient. Please make a zip of the used file (for calendar) and send.
ASKER
dear mr swanantra\
Please find attached needed details:
the zip file contains calendar control used in a form , with its style and javascripts
hope you could help
CAlendar.zip
Please find attached needed details:
the zip file contains calendar control used in a form , with its style and javascripts
hope you could help
CAlendar.zip
Your screen capture show that the date picker calendar is hidden.
So this only mean that the position need to be change.
try
the position need to be placed in this part of your code
So this only mean that the position need to be change.
try
vertical: 'bottom',
the position need to be placed in this part of your code
$('#<%=Txt_Date.ClientID %>').datetimepicker({
//isRTL: true,
locale: userLang,
showTodayButton: true,
format: 'l',
keepOpen: false,
// positions
horizontal: 'auto', // left, auto, right
vertical: 'bottom', // top, auto, bottom
date: selecteddate
});
ASKER
below is the error i am having:
horizontal is not recognized
horizontal is not recognized
Ho sorry I forget to put it under widgetPositioning
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
If this is still not displaying correctly
try widgetparent http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetparent
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning
$('#<%=Txt_Date.ClientID %>').datetimepicker({
//isRTL: true,
locale: userLang,
showTodayButton: true,
format: 'l',
keepOpen: false,
// positions
widgetPositioning: {
horizontal: 'auto', // left, auto, right
vertical: 'bottom', // top, auto, bottom
},
date: selecteddate
});
If this is still not displaying correctly
try widgetparent http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetparent
ASKER
it is not working attached represent same issue .
sd.png
sd.png
Ok perfect at least we see where the problem is
Take a look of this example this is a way to fix your problem
You will get the idea on how to display the calendar with custom CSS depending of the calendar disposition.
http://jsfiddle.net/lenamtl/dwjng8kh/
You can also tried to play with z-index if this is not fixing the problem
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Take a look of this example this is a way to fix your problem
$('#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'
});
}
});
var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
you will probably not need this line or you will need to adjust to your code You will get the idea on how to display the calendar with custom CSS depending of the calendar disposition.
http://jsfiddle.net/lenamtl/dwjng8kh/
You can also tried to play with z-index if this is not fixing the problem
https://www.w3schools.com/cssref/pr_pos_z-index.asp
ASKER
i still don't know where is teh problem and where i have to correct
Hi,
The problem you have is that the plugin get hidden by the container.
I don't know why you are using table for your form, you should use Bootstrap div.
so remove the table and keep the row and col, that should fix it.
The problem you have is that the plugin get hidden by the container.
I don't know why you are using table for your form, you should use Bootstrap div.
so remove the table and keep the row and col, that should fix it.
Pamela,
Have you tried the solution?
Have you tried the solution?
ASKER
sorry to say but it is not working
What problem are you facing now? Provide full code to debug.
Hi Pamela,
Let's add a container ID
to have something like this
or directly into the JS script
Reference: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#options
Another solution is to put the div of the widget in position: relative
Another solution
Let's add a container ID
data-date-container='#myContainerId'
to have something like this
<input id='myDatePicker' data-provide='datepicker' data-date-container='#myContainerId'>
or directly into the JS script
$('#myDatePicker').datepicker({
container:'#myContainerId'
});
Reference: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#options
Another solution is to put the div of the widget in position: relative
<div style="position:relative">
Another solution
.datepicker {
transform: translate(0, 3.1em);
}
Hi Pamela,
Please select appropriate answer and close the question.
Please select appropriate answer and close the question.
ASKER
nothing has been solved so till now this issue is still pending
Hi Pamela,
I have provided you different way to fix it.
I'm working with this script very often.
This is Javascript, CSS or print screen don't help much.
When you try a solution, check if you have any error in the browser console (right click inspect)
and provide the new code you are trying.
Because when you said it's not working it is not enough we need more technical feedback.
Maybe another Javascript on the page causing an error and there is no no way for us to know...
Maybe you should ask a coworker so he can inspect your code and help you to fix it based on provided solutions, this should not take long to fix it.
I have provided you different way to fix it.
I'm working with this script very often.
This is Javascript, CSS or print screen don't help much.
When you try a solution, check if you have any error in the browser console (right click inspect)
and provide the new code you are trying.
Because when you said it's not working it is not enough we need more technical feedback.
Maybe another Javascript on the page causing an error and there is no no way for us to know...
Maybe you should ask a coworker so he can inspect your code and help you to fix it based on provided solutions, this should not take long to fix it.
ASKER
fixed by adding position absolute
<asp:Panel ID="Pnl_detailsActions" runat="server" CssClass="PanelCurveStyle_ N"
Height="180px" ScrollBars="Auto" Style="position: absolute">
<asp:Panel ID="Pnl_HeaderActions" runat="server" CssClass="PanelCurveStyle_ N"
Height="200px" Width="100%" ScrollBars="Auto" style="position: absolute; margin-top: 16%;">
<asp:Panel ID="Pnl_detailsActions" runat="server" CssClass="PanelCurveStyle_
Height="180px" ScrollBars="Auto" Style="position: absolute">
<asp:Panel ID="Pnl_HeaderActions" runat="server" CssClass="PanelCurveStyle_
Height="200px" Width="100%" ScrollBars="Auto" style="position: absolute; margin-top: 16%;">
I have proposed several way to fix the position issue and you fixed it with position so this is why I award the points this way.
ASKER
ok thank you
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
ASKER