I am using asp.net code where datepicker is used to enter date. I want some code so that previous date cannot be selected and entered by the datepicker. How can I put the restriction.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
please tell me any asp.net code
try this
minimum date can select from last 20 days
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
$(function() {
$( "#datepicker" ).datepicker({ minDate: -0, maxDate: "+1M +10D" });
});
Related
Datepicker is working if I use it on page "localhost:4444/test" , "localhost:4444/test2" and "localhost:4444/dummy" but if I change the URL to "localhost:4444/test1/test2" then it is not working. I have verified it on multiple times. If there is a child page then datepicker pop-up is not getting displayed.
I tried it even on a basic page without models.
Here I am using thymeleaf, webjars/bootstrap, webjars/jquery, webjars/bootstrap-datepicker.
I am new to frontend , let me know if I am missing anything here or for additional info.
Edit1: In all scenarios at least it is showing up, just problem with pop up
Edit2:
controller:
#RequestMapping("/test") [working]
public String testPage( ){
return "helper/calender_test";
}
#RequestMapping("/test2/dummy") [not-working]
public String dummyPage(){
return "helper/calender_test";
}
helper/calender_test:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/4.5.3/css/bootstrap.min.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.standalone.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.1/css/all.css}" type="text/css"/>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="input-group date" id='example'>
<input class="form-control" type='text' placeholder= "date" />
<span class="input-group-addon">
<span class="input-group-text">
<i class='far fa-calendar-alt'></i>
</span>
</span>
</div>
</div>
<script th:src="#{/webjars/jquery/3.5.1/jquery.min.js/}" type="text/javascript"></script>
<script th:src="#{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js}" type="text/javascript"></script>
<script>
$('#example').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
clearBtn: true,
endDate: '0d',
startDate: '-5y'
});
</script>
</body>
</html>
I have found the root cause. There was one missing slash before the bootstrap-datepicker.js link. After giving the proper path it worked.
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
how can I use elrte Editor inside asp.net website?(any example)
Elrte Editor is pure javascript solution (more clear jQuery), so for accessing any of it features you have to use some javascript in your asp.net web-site.
First of all you should add some required folder with all it insertions to you project. You can find it inside installation package - elrte-1.2.zip. You have to copy to your project next folders: css, js, images with all subfolders and it content.
Secondly add some reference into your asp page like here:
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
<style type="text/css" media="screen">
body { padding:20px;}
</style>
For accessing content of this editor we can use some javascript api that was prepared to us by developers of this editor. So, lets see it here and we will find out that for getting editor content, for example, we can use next expression:
var content = $('selector').elrte('val');
So, lets add some page and editor interoperability into our page.
Add some button and textbox to your page:
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
and add next javascript, also:
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
After implementing this functionality you can get editor's content as well using javascript alert function and setting your textbox value, which can be accessed in your server code, actually.
Full asp.net page code in my case was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>elRTE</title>
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
</script>
<style type="text/css" media="screen">
body { padding:20px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="editor" runat="server">
</div>
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<br />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
</form>
</body>
</html>