i want to disable specific dates and all the past dates in Razor pages calendar. I have database table to store the specific dates, i want to fetch from there and disable the dates in the razor pages calendar.
<input asp-for="ManageBooking.BookingDate" class="form-control" min="#DateTime.Now.ToString("yyyy-MM-dd")" />
this is what i will be doing for disabling all the past dates, but i want to disbale certain dates that will be reading from Database.
Any help would be appreciated,
Thanks,
Teena John
Have you considered using Bootstrap 3 Datepicker? It will be convenient.
First, install the corresponding Nuget package:
Install-Package Bootstrap.v3.Datetimepicker
Install-Package Bootstrap.v3.Datetimepicker.CSS
Then, refer to the corresponding js file and css file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Finally, you can disable specified dates and past dates via the disabledDates attribute and the minDate attribute:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
disabledDates: [
"01/17/2023",
"01/18/2023",
"01/19/2023"
],
minDate: "01/16/2023"
});
});
</script>
</div>
</div>
Test Result:
For more details, you can refer to this link.
Related
Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.
Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result
Basic example fails:
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div class="p-col-6">6</div>
<div class="p-col-4">4</div>
</div>
<script>
const {createApp, ref} = Vue;
const App = {
setup() {
const val = ref(null);
return {
val
};
},
components: {
'p-inputtext': primevue.inputtext
}
};
createApp(App).mount("#app");
</script>
</body>
</html>
Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:
In order to use prime vue's flex and grid layout, you need to load PrimeFlex.
https://primefaces.org/primevue/showcase/#/primeflex
The documentation only has npm setup but you may be able to include the following link.
<link href="https://cdn.jsdelivr.net/npm/primeflex#2.0.0/primeflex.min.css" rel="stylesheet">
In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.
import 'primeflex/primeflex.css';
https://primefaces.org/primevue/showcase/#/primeflex
The CDN method works!! However I downloaded the file and placed this
<link rel="stylesheet" href="static/primevue/primeflex.min.css" />
inside the head section of my html file.
However it did not work as per the documentation. I had to remove the p- for it to work:
<div id="app" class="grid">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
</head>
<body>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;"/>
</div>
<div>
<b-button #click="$refs.fileInput2.click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
</body>
</html>
The $refs.fileInput2 here is referring to the Vue component, not really the input element, which is actually wrapped inside a div (you could see it if you inspect the rendered element). So one thing you could do (although it's ugly and not recommended, you should at least move this to the methods section):
app = new Vue({
el: "#app",
data: {
files: '',
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-button #click="$refs.fileInput1.click()"> Load 1</b-button>
<input type="file" ref="fileInput1" style="display:none;" />
</div>
<div>
<b-button #click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
<b-form-file v-model="files" style="display:none;" ref="fileInput2" />
</div>
</div>
Although I would say you should just use the native file input element since you are hiding the <b-form-file/> anyway.
It's working fine.You may check the below fiddle.
https://jsfiddle.net/tyagdvm5/
<b-form-file style="display:none;" v-model="file2" choose-label="Attachment2"></b-form-file>
Or for accurate solution please create a fiddle and upload the link.
I'm trying to create a MaterialiseCSS range slider which is based on noUiSilder. The documentation says:
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
I did everyting unfortunately it is showing the defaut HTML range (like the one in the link).
My html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
<script type="text/javasript" src="js/phonefinder.js"></script>
</head>
<body class="grey lighten-4">
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
</body>
</html>
js/phonefinder.js:
$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
});
What am I doing wrong?
The noUiSlider range isn't a a input type, it should be a div.
So:
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
should be:
<form>
<div id="connect"></div>
</form>
I tried changing the script to the following and it still doesn't trigger the event.. am I missing something?
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
I also tried pagebeforecreate but the result is the same.. :(
I am trying a simple jquery mobile page and testing on chrome portable. However, in the following code, the input click event isn't working where as button click works. I also tried "input#radioyes" as "div>fieldset>input#radioyes" and still doesnt work.
<!DOCTYPE html>
<html>
<head>
<title>Background check </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" />
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />
<!-- JQuery Date Picker components -->
<link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" />
<script src="jQuery/jQuery.ui.datepicker.js"></script>
<script src="jQuery/jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet" href="css/folo.css" />
<script type="text/javascript">
$('#page1').live('pageshow',function(event) {
$("#radioyes").click(function(){
$("p").hide();
});
});
</script>
</head>
<body >
<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
<div data-role="header">
<h1>"PAGE1"</h1>
</div><!-- /header -->
<div data-role="content" >
<p> Welcome. </p>
<div id="SSN">
<label for="basic">SSN: </label>
<input name="ssn" id="textSSN" value="" data-theme="a" />
</div>
<div id="first">
<label for="first">First Name:</label>
<input name="input_first" id="input_first" value="" data-theme="d" />
</div>
<div id="last">
<label for="last">Last Name:</label>
<input name="input_last" id="input_last" value="" data-theme="d" />
</div>
<button id="btn1">Click me</button>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-role="fieldcontain">
<legend>Have you used other last name?</legend>
<input type="radio" name="radio-choice" id="radioyes" value="yes" />
<label for="radioyes">Yes</label>
<input type="radio" name="radio-choice" id="radio-no" value="No" checked="checked" />
<label for="radio-no">No</label>
</fieldset>
<div id="otherlast">
<label for="otherlast">Other Last Name:</label>
<input name="input_otherlast" id="input_otherlast" value="" data-theme="d" />
</div>
</div>
<div id="dob">
<label for="date">Date Of Birth:</label>
<input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>
Appreciate any help.. The version of Jquery is 1.7.1 1.6.4 downloaded and the jquery mobile is the latest version.
You cannot use $(document).ready in jquery mobile here's an documentation about it
Also here's an answer to a similiar question
jQM 1.0 does not support jQuery 1.7.x please use jQuery 1.6.4 ( Source )
jQM uses pageInit(), not $(document).ready() ( Source )
Also jQM adds additional markup to your page so $("p").hide(); might be hiding as expected but the additional markup might still be visible. I would suggest using an id for the span elements
UPDATE:
Try this
$('#page1').live('pageshow',function(event) {
$("#radioyes").bind( "change", function(event, ui) {
$("p").hide();
});
});
Live Example:
http://jsfiddle.net/CZLcR/9/
Docs for Radio Events:
http://jquerymobile.com/demos/1.0/docs/forms/radiobuttons/events.html
Having trouble constructing a button dynamically with jQuery Mobile. Copy and run. See notes in code.
<!DOCTYPE html>
<html>
<head>
<title>MSC Pre-Close Application</title>
<meta charset="utf-8"/>
<!-- standard Jquery/jQuery Mobile Libraries -->
<script src="jquery.mobile/jquery.js"></script>
<script src="jquery.mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" />
<BR/>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline">
<h1>Main Menu</h1>
</div>
<div class="ui-body ui-body-c">
<div data-role="content">
<div class="ui-block-a"><button id="click_me" type="submit" data-theme="a" data-icon="home">Click me to change the button to my right</button></div>
<div class="ui-block-a"><button class="cl_pre_phone1" type="submit" rel="external" data-theme="a" data-icon="home">Primary Phone</button></div>
<script>
$(document).ready(function()
{
// this changes the label but not the href action.
$(".cl_pre_phone1").html("<a href='google.com'> Google</a>");
$("#click_me").click(function() {
alert("this should change the text and href of the button!");
// here I would like to change the value as well as the href action, but it does not work.
$(".cl_pre_phone1").html("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>");
//$(".cl_pre_phone1").append("<a href='yahoo.com'>Yahoo</a>").reload(true);
});
});
</script>
You're getting messed up by the enhancement which jQM does. Your button is getting rewritten to:
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Primary Phone</span>
<span class="ui-icon ui-icon-home ui-icon-shadow"></span></span>
<button class="cl_pre_phone1 ui-btn-hidden" type="submit" data-theme="a" data-icon="home" aria-disabled="false">Primary Phone</button>
One way round this would be to change the call inside the callback to:
$(".cl_pre_phone1").attr("href", "http://yahoo.com").parent().find(".ui-btn-text").text("Yahoo");
or you could replace the whole ui-block-a div.