Link to home
Start Free TrialLog in
Avatar of pamela rizk
pamela rizkFlag for Lebanon

asked on

Calendar bootstrap datetimepicker

dear all

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>

Open in new window


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
Avatar of pamela rizk
pamela rizk
Flag of Lebanon image

ASKER

any help??
any news?
Avatar of Scott Fell
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.
i cannot please help
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.
i wil create a simle page and give you its content so you can check
but even if i prepare a whole page it is the same becasue you alreay have all the code
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
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.
is the attached screenshot enough for you
Untitled.png
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
dear Mr Lenamtl
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.
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
Your screen capture show that the date picker calendar is hidden.
So this only mean that the position need to be change.
try  
vertical: 'bottom',

Open in new window


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
            });

Open in new window

below is the error i am having:
horizontal  is not recognized
Ho sorry I forget to put it under widgetPositioning

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
            });

Open in new window


If this is still not displaying correctly
try widgetparent http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetparent
it is not working attached represent same issue .
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

$('#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'
	        });
	      }
	    });

Open in new window


var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');

Open in new window

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
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.
Pamela,
Find attached sample code of calendar, update as per your requirement.
CodeSamples.zip
Pamela,
Have you tried the solution?
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

data-date-container='#myContainerId'

Open in new window


to have something like this
<input id='myDatePicker' data-provide='datepicker' data-date-container='#myContainerId'>

Open in new window


or directly into the JS script
$('#myDatePicker').datepicker({
  container:'#myContainerId'
});

Open in new window


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">

Open in new window


Another solution
.datepicker {
  transform: translate(0, 3.1em);
}

Open in new window

Hi Pamela,

Please select appropriate answer and close the question.
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.
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%;">
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.
ok thank you
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members 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.