locked
Need help in setup boostrap datepicker. RRS feed

  • Question

  • User726159118 posted

    Hello All,

    I have implemented the <g class="gr_ gr_90 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="90" data-gr-id="90">boostrap</g> <g class="gr_ gr_130 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="130" data-gr-id="130">datepicker</g> in my <g class="gr_ gr_134 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="134" data-gr-id="134">webform</g>. using below function. 

    $(document).ready(function () {
    
    
                $('[id*=txtDate]').datepicker('hide');
            });
    
            $(function () {
                $('[id*=txtDate]').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "mm/dd/yyyy"
                }).on('changeDate', function (ev) {
                    $(this).blur();
                    $(this).datepicker('hide');
                });
            });

    <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>

    But <g class="gr_ gr_180 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="180" data-gr-id="180">when ever</g> I <g class="gr_ gr_213 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="213" data-gr-id="213">am click</g> on any button or link button in the page the <g class="gr_ gr_288 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="288" data-gr-id="288">calender</g> pop up is rendering, Can <g class="gr_ gr_372 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="372" data-gr-id="372">any one</g> please help me to restrict the <g class="gr_ gr_507 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="507" data-gr-id="507">calender</g> open only on textbox focus. 

    Regards,

    Omkar Mhaiskar.

    Monday, December 17, 2018 10:59 AM

All replies

  • User-1174608757 posted

    Hi Omkar Mhaiskar

    According to your description ,I have made a sample on my side. It works well. So,could you please tell which browser you have used now?On my side ,I used Chrome browser.

    Else,could you please share the whole page you have used? If you could post more details information, it will be more easily for us to reproduce your problem.

    More details about my test demo, you could refer to below codes:

    Datepicker.aspx:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script> 
          $(document).ready(function () {
              $("[id*=txtDate]").datepicker('hide');
          });
           $(function () {
                $('[id*=txtDate]').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "mm/dd/yyyy"
                }).on('changeDate', function (ev) {
                    $(this).blur();
                    $(this).datepicker('hide');
                });
            });
    
    
      </script>
         
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
    
                <asp:Button ID="Button1" runat="server" Text="Button" />
            
            </div>
        </form>
    </body>

    Best Regards 

    Wei Zhang

    Tuesday, December 18, 2018 9:07 AM
  • User726159118 posted

    Hello Wei,

    Thanks for your support. I am using the <g class="gr_ gr_96 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="96" data-gr-id="96">boostrap</g> <g class="gr_ gr_108 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="108" data-gr-id="108">datepicker</g> not jquery <g class="gr_ gr_153 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="153" data-gr-id="153">datepicker</g>.

    Can you support me using <g class="gr_ gr_219 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="219" data-gr-id="219">boostrap</g> <g class="gr_ gr_235 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation multiReplace" id="235" data-gr-id="235"><g class="gr_ gr_232 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling" id="232" data-gr-id="232">datepicker</g>.</g> 


    Regards,
    Omkar.

    Tuesday, December 18, 2018 12:56 PM
  • User-1174608757 posted

    Hi Omkar Mhaiskar,

     I'm sorry I haven't seen it clearly.I made a sample about  boostrap datepicker on my side ,However it still works well.So,it  may be caused by  your code  or the type of your browser.Here is my demo.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>  
        <script> 
          $(document).ready(function () {
              $("[id*=txtDate]").datepicker('hide');
            });
             $(function () {
                $('[id*=txtDate]').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "mm/dd/yyyy"
                }).on('changeDate', function (ev) {
                    $(this).blur();
                    $(this).datepicker('hide');
                });
            });
           
      </script>
         
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
    
                <asp:Button ID="Button" runat="server" Text="Button" />
            
            </div>
        </form>
    </body>
    </html>
    

    It shows as below:

    Best Regards

    Wei Zhang

    Wednesday, December 19, 2018 8:39 AM