Solved

date picker - bootstrap and moment_datepicker

Posted on 2016-07-20
3
57 Views
Last Modified: 2016-07-22
I have a datepicker implemented using Bootstrapv2.3.1 and moment.js / moment_datepicker.js (version 2.50)

It's tricky to post any sort of jsfiddle since it is an ASP.NET web user control (ascx).

I believe this is a CSS issue, I just am not sure how to override the cascade provided by bootstrap without interfering with bootstraps look and other functionality.

Basically, I want to have a "clear text" button which clears the date value chosen by the picker.  Sometimes it is desirable to not have any value chosen for the date, but if you accidentally choose a date, the date picker seems to provide no way to unpick the date or set it to Nothing.

As far as layout, I want the button to be on the same "row" as the text input and the datepicker icon.  Right now if I put it in the same div as the datepicker icon button, the button no longer clears the text, it invokes the date picker.  I think this is because one it is put inside the div - the bootstrap CSS overrides the button behavior.  I need it to still apply the bootstrap styling, but not interfere with the button's functionality.

web user control:

<%@ Control Language="vb" AutoEventWireup="true" CodeBehind="uc_DatePicker.ascx.vb" Inherits="DealerSocket.Web.uc_DatePicker" EnableViewState="true" %>

<script src="../javascript/datePicker.js"></script>
<script src="../javascript/date.js"></script>
<script src="/ReportEngine/js/moment.js" type="text/javascript"></script>
<script src="/Assets/Moment/Datepicker/moment-datepicker.js"></script>
<link href="/Assets/Moment/Datepicker/datepicker.css" rel="stylesheet" />
<style type="text/css">
    .datepicker.dropdown-menu {
        min-width: 246px !important;
        padding-left: 10px !important;
    }

    .switch {
        background: white none repeat scroll 0 0 !important;
    }

    .datepicker th.switch {
        width: 170px !important;
    }

    .datepicker-days .table-condensed tr td:hover {
        background-color: #DCEDF7 !important;
    }

    .datepicker table tr td.active, .datepicker table tr td.active:hover {
        background-image: -moz-linear-gradient(center top, hsl(200, 80%, 40%), hsl(193, 80%, 40%));
        background-image: -ms-linear-gradient(top, hsl(200, 80%, 40%), hsl(193, 80%, 40%));
        background-image: -webkit-linear-gradient(top, hsl(200, 80%, 40%), hsl(193, 80%, 40%));
    }

    
    .blahblah { 
        width:300px;         
        border:1px solid red;  
    }

</style>


<asp:Literal ID="capti" runat="server" Text="<%= Me.CaptionText %>" />

<div class='input-group date blahblah' id='divDatePicker' runat="server" onclick="javascript:openDatepicker(this);">
    <asp:TextBox ID="IntntlDatePick" ReadOnly="true" CssClass="form-control" ClientIDMode="Static" Text="" TextMode="DateTime" autocomplete="off"  onclick="javascript:DatePickerRefreshState($(this).attr('id'),'Visible');" runat="server" />
    <span class="input-group-addon" style="cursor: pointer;">
        <span class="fa fa-calendar"></span>        
    </span>  


IF I PUT THE "CLEAR BUTTON" HERE, IT NO LONGER CLEARS THE DATE PICKER VALUE, INSTEAD IT INVOKES THE DATE PICKER    
    
</div>


THIS IS THE CLEAR BUTTON:

<span id="clrparen" class="input-group-addon" style="cursor: pointer; width:13px;" onclick="javascript:ClearButtonRefreshState($(this).children().attr('id'), 'Visible');">
        <span style="width:13px; cursor: pointer;" id="clrbtn" class="fa fa-eraser" onclick="javascript:ClearButtonRefreshState($(this).attr('id'),'Visible');" runat="server"></span>
</span>  

Open in new window


screenshot:

clear button
0
Comment
Question by:knowlton
  • 2
3 Comments
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
More than likely the problem is in that some definition in the other CSS files for the page is conflicting or overriding the css you have here. The only way to determine or even guess an answer to this is to look at the CSS for all the elements at play here. There just isn't enough information here to work from. Can you post a link to the page in question?
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Final solution:

<div class='input-group date' id='divDatePick' style="width: 100%;" runat="server">    
        <asp:TextBox ID="IntntlDatePick" CssClass="form-control" ClientIDMode="Static" Text="<%= Me.DateText %>" TextMode="DateTime" autocomplete="off" onclick="javascript:DatePickerRefreshState($(this).attr('id'),'Visible');" runat="server" />
        <span class="input-group-addon" style="cursor: pointer;" onclick="javascript:openDatepicker(this);">
            <span class="fa fa-calendar"></span>
        </span>    

        <span id="clrparen" class="input-group-addon" style="cursor: pointer; width: 13px;" onclick="javascript:ClearButtonRefreshState($(this).children().attr('id'), 'Visible');">
            <span style="width: 13px; cursor: pointer;" id="clrbtn" class="fa fa-eraser" onclick="javascript:ClearButtonRefreshState($(this).attr('id'),'Visible');" runat="server"></span>

        </span>
</div>

Open in new window

0
 
LVL 5

Author Closing Comment

by:knowlton
Comment Utility
Thanks!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now