I need to only show Mondays and Thursdays in jQuery UI calendar. I am able to enable only Mondays but not sure how to add Thursdays to the return list as well?
Can u also let me know how to not display other days(instead of rendering disabled button)?
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day == 1)];
}
});
});
<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
Date:
<div id="datepicker"></div>
Add condition for Thursday too. Use css to if you want to hide other days
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
const day = date.getDay();
const enable=(day === 1||day===4);
return [enable,enable?'':'hide'];
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.hide{
visibility: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
Date:
<div id="datepicker"></div>
Related
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/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>
$( function() {
$( "#datepicker" ).datepicker({ format: 'yy-mm-dd' });
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
This is the code from jquery UI website.
And like you can see, this format doesn't work at all!
do you know why it doesn't work?
The property is incorrect ... instead of format should be dateFormat:
So, instead of:
$( "#datepicker" ).datepicker({ format: 'yy-mm-dd' });
Should be:
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
API reference here.
I have problem in using ui-grid with components in angularjs version > 1.5. Can someone help me to give me a method to do that? Because I don't use scope and in the documentation of ui-grid is for angular last than 1.5
I tried this code and doesn't show the table with information :
(function(){
'use strict';
angular.module('app', ['ngTouch', 'ui.grid'])
.component('exampleComponent', {
controller: MainController,
controllerAs:'vm',
templateUrl:'index.html',
bindings:{
propertyToBind: '='
},
template: `
<div>
<p>PropertyThatIWantToBindAndShowInComponentInCellTemplate: {{ ctr.propertyToBind }}</p>
</div>
`
});
function MainController($http,$log){
vm.gridOptions = {};
vm.gridOptions.columnDefs = [
{ name: 'ShowScope',
// <example propertyToBind="ValueOfTheProperyThatIWantToShow"></example>
// cellTemplate:'<div title="{{COL_FIELD}}"> {{row.entity.id}} </div>'
//'<div class="ui-grid-cell-contents tooltip-uigrid" title="{{COL_FIELD}}">'
cellTemplate:'<p propertyToBind ="{{row.entity.name }}"></p> '
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
vm.gridOptions.data = data;
});
}
})();
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<example-component>
<div ui-grid="gridOptions" class="grid"></div>
</example-component>
<script src="app.js"></script>
</body>
</html>
I have a grid page with easyui expanded row in it.
now I want to expand the row to show details, so the detail page html list below:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head runat="server">
<title>谱系信息树</title>
<link href="../../Template/css/common.css" rel="stylesheet" type="text/css" />
<link href="../../Theme/View.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/dtree/dtree.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
mytree = new dTree('mytree');
#Html.Raw(ViewData["pTree"].ToString());
document.write(mytree);
</script>
</body>
</html>
in my grid page, when I expand the row, the ajax will be trigger to send request to detail page:
onExpandRow: function (index, row) {
var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
ddv.panel({
height: 170,
border: false,
cache: false,
href: 'PedigreeNewChart?mid=' + row.mothor_id + "&fid=" + row.father_id,
onLoad: function () {
$('#dg').datagrid('fixDetailRowHeight', index);
}
});
$('#dg').datagrid('fixDetailRowHeight', index);
}
But now , when I expand to get the detail page, an error throw to me (firebug):
I have the needed js file(vertdtree.js) included in the detail page, but why it can't recognize it?
dTree is not loadded.
probably issue is how you include script
<script src="../../Scripts/dtree/vertdtree.js" type="text/javascript"></script>
but it should be
<script src="~/Scripts/dtree/vertdtree.js" type="text/javascript"></script>
Want to implement simple dialog with jquery-mobile on phonegap: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
but my LogCat tells me (when I press the button):
05-10 15:02:37.960: V/webview(10536): singleCursorHandlerTouchEvent -getEditableSupport FASLE
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=600; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Prototyp_V.2.0</title>
<link rel="stylesheet" href="js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0a3.min.css" type="text/css" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.ui-page {
background: #ffffff;
}
</style>
</head>
<body onload="init();" id="stage" class="theme">
<script type="text/javascript">
function test() {
alert("test");
$(document).delegate('#simplestring', 'click', function() {
$(this).simpledialog({
'mode' : 'string',
'prompt' : 'What do you say?',
'buttons' : {
'OK': {
click: function () {
$('#dialogoutput').text($('#dialoglink').attr('data-string'));
}
},
'Cancel': {
click: function () { },
icon: "delete",
theme: "c"
}
}
})
})
}
</script>
<div data-role="page" id="id0">
<div data-role="header" data-theme="c">
<h1>Heading</h1>
</div>
<div data-role="content">
<div id="twitter_"><center>Dialog Box</center>
<p>You have entered: <span id="dialogoutput"></span></p>
Open Dialog
</div>
</div>
</body>
</html>
the alert "test" is called, but I always get this cursor event !
What do you mean "cursor event" ? and
use button lik this:
Open Dialog
And
your function should like this
$(document).delegate('#dialoglink, 'click', function() {
/// Your other code goes here
});
use outside the test function
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</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>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</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>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>