I am using daterangepicker and created an asp.net webform with help of the following codes
<script type="text/javascript">
$(function () {
$('#calendar').datetimepicker({
format: 'L',
inline: true
});
});
</script>
<div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />
I wanted to display selected date into asp.net Hidden Field
Try the below code.
$(function() {
$('#calendar').datetimepicker({
format: 'L',
inline: true
});
});
$("#calendar").on("dp.change", function (e) {
alert(e.date);
$('#HiddenField1').val(e.date);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<div id="calendar" style="width: 100%"></div>
<asp:HiddenField ID="HiddenField1" runat="server" />
Related
I am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.
I read all the documentation options, functions, and events.
I also included all dependencies of JS and CSS.
But something is not working properly somehow.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./moment.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
There is an option of format in the documentation about displaying calendar part or time-picker part.
What I want is to display both parts i.e. calendar and time-picker.
But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.
When I set format: 'hh:mm' it shows time-picker properly.
But when I set format:'DD/MM/YYYY hh:mm' to enable both parts, it doesn't show calendar part and only show icon for time-picker and when I click that icon it opens time-picker. This is the same case if I do not set format option explicitly and keep it default to false.
Is there anything I am doing wrong?
Currently Bootstrap-DateTimePicker does not support Bootstrap 4.
In fact, your code looks fine with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
I have two jQuery functions one for date time picker
<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 type="text/javascript">
$(document).ready(function () {
$("#txtDate").datepicker();
});
</script>
And another for Multiselect Dropdown/Listbox with checkbox.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"</script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
And the ASP code as:
for date time
<asp:TextBox ID="txtDate" runat="server" ></asp:TextBox>
for dropdown
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Guava" Value="4" />
<asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
The problem that I am having is that both of them don't work together if I put them in my code only date time picker works and not the multi-select dropdown and the multi-select dropdown works only when I comment out the corresponding date time picker code.
There is some dysfunctionality which I am not able to figure out.
This is a working sample based on the files you are referencing in your page put it is HTML based not ASPX it will be easy to you to use.
Note:- you were referencing two jquery versions i commented one of them
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>!-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker();
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true
});
});
</script>
Please find the full sample here
head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$document.ready(function(){
$("#Form1").validate({
rules:{
txtFname:{
required:true,
rangelength:[3,20],
}
},
messages: {
txtFname: "First Name Is Required",
}
})
})//ready function close
</script>
</head>
<body>
<form id="Form1" runat="server" clientidmode="static">
<asp:TextBox ID="txtFname" CssClass="form-control" runat="server"></asp:TextBox>
<asp:Button CssClass="btn btn-primary" id="btnSubmit" runat="server" Text="Submit"/>
</form>
</body>
I am trying to validate the txtFname Field in the form at row 1 in the modal but I am not able to.. I cant seem to figure out why. Can someone please help?
I am using bootstrap v3
Seems like a syntax issue (parenthesis, some extra colons and missing semicolons...etc)
try the following should work:
<script type="text/javascript">
$(document).ready(function() {
$("#Form1")
.validate({
rules: {
txtFname: {
required: true,
rangelength: [3, 20]
}
},
messages: {
txtFname: "First Name Is Required"
}
});
})//ready function close
</script>
jQuery datepicker not working with master page. datepicker not working while master page id added.
Please find the below code for more information.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" ref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<p>Date: <input type="text" id="datepicker"></p>
</asp:Content>
You need to add an attribute ClientIDMode="Static" to save the id as is.
I recommend to use class instead but not overide the server generated ID.
Like:
<input type="text" id="datepicker" class="datepicker" />
Then:
$(function () {
$(".datepicker").datepicker();
});
In the below code i have a jquery datepicker.I tried to implement in bootstrap modal .But it is not working .Pls help me to solve the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtdob]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif'
});
});
</script>
<input type="text" style="width:30%" id="txtdob" name="nmdob" class="form-control" runat="server" placeholder="Dob" />
You have to call the function in the body onload() because on bootstrap, the elements are not initialized yet, so you cannot access the DOM.
change
$("[id$=txtdob]").datepicker({
to
$("#txtdob").datepicker({
and put it in $(document).ready...