Click here to Skip to main content
14,297,585 members
Rate this:
Please Sign up or sign in to vote.
See more:
I using jquery daterangepicker control in asp.net but it not working

What I have tried:

My code:
<pre lang="c#">
<div class="col-md-6 xdisplay_inputx form-group has-feedback">
                                      
<input type="text" runat=server class="form-control has-feedback-left" id="single_cal1" placeholder="First Name" aria-describedby="inputSuccess2Status">
                                         
                                        <script type="text/javascript">
                                            $(document).ready(function () {
                                                $(function () {
                                                    
                                              $("#single_cal1").daterangepicker();
                                                });
                                            });
                                        
                                        </script>                                        
                                        
                                        <span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
                                        <span id="inputSuccess2Status" class="sr-only">(success)</span>
                                      </div>


function daterangepicker Bootstrap
$('#single_cal1').daterangepicker({
  singleDatePicker: true,
  singleClasses: "picker_1",
  locale: {
    format: 'DD/MM/YYYY',
  }

}, function(start, end, label) {
  console.log(start.toISOString(), end.toISOString(), label);
});


Help me !!
Posted
Updated 15-Oct-17 22:42pm
v3
Rate this:
Please Sign up or sign in to vote.

Solution 1

This code

$('#single_cal1')


is attaching to an element with an "id" of single_cal1. If you view the source of your code do you see any elements with that id? When you use runat=server asp.net might alter the id of the control. If the javascript is on the same aspx\ascx page as the control then use

$('#<%=single_cal1.ClientID%>')


if they're not on the same page then use something other than the id, so add an attribute to the text box like

data-type="datepicker"

and update the js

$('[data-type="datepicker"]')
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

try
$("#<%= single_cal1.ClientID %>").daterangepicker();
   
Comments
Member 13359760 16-Oct-17 5:44am
   
Thanks for help! I try but it not working
Karthik_Mahalingam 16-Oct-17 5:57am
   
try
  $(document).ready(function () {
            $("#<%= single_cal1.ClientID %>").daterangepicker();
        });


one dom load event is enough.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100