locked
ASP.NET MVC 5 - Datepicker and inputmask (HH:mm) 24 hours, are not showing in bootstrap modalpopup RRS feed

  • Question

  • User135423268 posted

    Good Day Everyone

    I'm having a problem, it sims that the inputmask and datepicker does not show properly on a modalpopup (Using IE), how can I made it to show on my modalpopup? I'm a beginner when it comes to developing web applications so explain it as simple as possible, here's my code.

    <script type="text/javascript">
    	$('#datefrom').datepicker();
    </script>
    
    
    <div>
    	<button type="button" class="btn" onclick="$('#myModal').modal('show')">
    </div>
    
    <div class="modal fade" id="myModal">
    
     <div class=modal-dialog modal-lg modal-dialog-centered">
       
       <div class="modal-content">
       		<div class="modal-header">
       			<h6>Title</h6>
       			<button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
       		</div>
       		<div class="modal-body">
    
       			<input type="text" name="datefrom" id="datefrom" class="form-control">
    
       			<input type="button" class="btn" value="Save">
    
       		</div>
       </div>
    
     </div>
    
    </div>
    

    Thursday, July 5, 2018 12:04 PM

Answers

  • User-369506445 posted

    hi

    you have to change text input to date input

    please change below line

                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    


    to

                    <input type="date" name="datefrom" id="datefrom" class="form-control">
    

    your complete code

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    
    <script type="text/javascript">
    	$('#datefrom').datepicker();
    </script>
    
    
    <div>
        <button type="button" class="btn" onclick="$('#myModal').modal('show')">
    </div>
    
    <div class="modal fade" id="myModal">
    
        <div class=modal-dialog modal-lg modal-dialog-centered">
    
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Title</h6>
                    <button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
                </div>
                <div class="modal-body">
    
                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    
                    <input type="button" class="btn" value="Save">
    
                </div>
            </div>
        </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 5, 2018 2:39 PM
  • User465171450 posted

    When your script to setup the datepicker is called the page DOM may not be loaded yet. Please try the following which will set the datepicker after the DOM has been loaded.

    <script type="text/javascript">
    $(document).ready(function(){
    	$('#datefrom').datepicker();
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 5, 2018 3:00 PM

All replies

  • User-369506445 posted

    hi

    you have to change text input to date input

    please change below line

                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    


    to

                    <input type="date" name="datefrom" id="datefrom" class="form-control">
    

    your complete code

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    
    <script type="text/javascript">
    	$('#datefrom').datepicker();
    </script>
    
    
    <div>
        <button type="button" class="btn" onclick="$('#myModal').modal('show')">
    </div>
    
    <div class="modal fade" id="myModal">
    
        <div class=modal-dialog modal-lg modal-dialog-centered">
    
            <div class="modal-content">
                <div class="modal-header">
                    <h6>Title</h6>
                    <button type="button" class="close" onclick="$('#myModal').modal('hide')"></button>
                </div>
                <div class="modal-body">
    
                    <input type="text" name="datefrom" id="datefrom" class="form-control">
    
                    <input type="button" class="btn" value="Save">
    
                </div>
            </div>
        </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 5, 2018 2:39 PM
  • User465171450 posted

    When your script to setup the datepicker is called the page DOM may not be loaded yet. Please try the following which will set the datepicker after the DOM has been loaded.

    <script type="text/javascript">
    $(document).ready(function(){
    	$('#datefrom').datepicker();
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 5, 2018 3:00 PM
  • User135423268 posted

    Hi Everyone

    Thanks for your help, your codes are working if it's running in Chrome, but I'm having problem when running it on Internet Explorer 11, Our company is still using IE, the datepicker his having a problem when inside a Modal Pop-up.

    Friday, July 6, 2018 3:40 AM
  • User-1171043462 posted

    In that case simply set DateFormat in Bootstrap DatePicker and validate the Format using Regular Expression and DataAnnotations

    Bootstrap DatePicker (Calendar) in ASP.Net MVC

    For DataAnnotations and Regex

    ASP.Net MVC: Insert Date in ddMMyyyy format to Database

    Friday, July 6, 2018 7:10 AM
  • User1520731567 posted

    Hi amendoza29,

    your codes are working if it's running in Chrome, but I'm having problem when running it on Internet Explorer 11

    Do you use HTML5 date input (type="date")?

    It can't support IE.

    Look the picture:

    I suggest you could use Jquery ui datepicker. It supports IE 11.

    look:

    And you just add a Initialization function as what @markfitzme said. Datepicker will works well.

    More details, you could refer to:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

    https://jqueryui.com/browser-support/

    Best Regards.

    Yuki Tao

    Friday, July 6, 2018 9:07 AM