After browsing a lot of topics over here and trying different approches I still have problems with disabling days and dates in the jQuery UI DatePicker.
I tried creating 2 arrays which I check in the beforeDayShow option, but what ever I try, none of the days return unavailable in the calendar.
What am I doing wrong?
$(document).ready(function(){
//Disable Arrays
var disableDays = [0,1,6], //su, mo, sa
disableDates = ["22-02-2019", "24-02-2019"] //dd-mm-yy
//Create DatePicker
$("#datepicker").datepicker({
beforeDayShow: function(date){
var day = date.getDay(),
dmy = $.datepicker.formatDate('dd-mm-yy', date);
//Disable day
if (disableDays.indexOf(day) != -1){
return [false];
//Disable date
} else if (disableDates.indexOf(dmy) != -1){
return [false];
//Enable date
} else {
return [true];
}
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
Im sorry, i had made a "stupid" mistake.
I called the datepicker option "beforeDayShow" instead of "beforeShowDay"
It's working now
Related
I have a page called PayOut.cshtml. On this page, I have a button called Pay, which opens a new small window called Authenticate.cshtml for a user to authenticate himself by specifying his email and password.
Once a user has been authenticated, the the Authenticate.cshtml should be dismissed, and showing a button called Confirm in the PayOut.cshtml page.
I have tried the following:
public AuthenticateController(Authenticate obj)
{
var success = false;
if (auth) {
success = true;
}
return View("close");
}
View for close:
<body>
<script type="text/javascript">
window.close();
</script>
</body>
How can I dismiss the the authenticate view and show a button in the PayOut view by using session ? Please help.
You can use "postMessage", in the main window use something like this:
<!DOCTYPE html>
<html>
<header>
<title>PostMessage Demo</title>
</header>
<body>
<button id="btn" onclick="openPopup();">Open Popup</button>
<script>
window.addEventListener("message", onMessage, false);
function onMessage(event){
document.getElementById("btn").innerText = "you typed " + event.data;
document.getElementById("btn").disabled = false;
};
function openPopup(){
document.getElementById("btn").textContent = "popup active";
document.getElementById("btn").disabled = true;
window.open("/popup", "popup window");
}
</script>
</body>
</html>
Then in the popup window this:
<!DOCTYPE html>
<html>
<header>
<title>Popup</title>
</header>
<body>
<input id="textEdit" type="text" value=""></input>
<button onclick="_close();">Close popup</button>
<script>
function _close(){
let pUri = window.location.protocol + "//" + window.location.host + "/";
window.opener.postMessage(document.getElementById("textEdit").value, pUri);
window.close();
}
</script>
</body>
</html>
When you click the "Close popup" button in the popup window it will close and trigger the onMessage event in the main window with the text you typed in the "textEdit" input.
For security reasons, the specs actually don't allow this. Although, I just tested this with Edge, Chrome, Firefox, and IE and it worked. Could you clarify how it didn't work?
Anyway, I decided to try another method that doesn't involve a window trying to close itself and it worked in the same four browsers.
In Payout.cshtml
var newWindow;
function authenticate() {
newWindow = window.open("#Url.Action("Authenticate")");
window.setTimeout(tryCloseWindow, 5000);
}
function tryCloseWindow() {
try {
if (newWindow.closeMe == undefined) {
window.setTimeout(tryCloseWindow, 1000);
return;
}
} catch(ex) {
// window was closed by user
return;
}
newWindow.close();
}
Authenticate.cshtml
<button onclick="pay();">pay</button>
#section Scripts
{
<script>
function pay() {
window.location = "#Url.Action("Close")";
}
</script>
}
Close.cshtml
#section Scripts
{
<script>
window.closeMe = true;
</script>
}
I saw another question that sets the first day to Monday by setting the first day to be 1.
While I want to set the first day to be Friday.
I tried to set the first date to 5, but not working as expected.
When I click on 1/2/8/9/15/16/22/23 it gives wrong start date, while if clicked other than them, it will display the right start date.
<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
firstDay: 5,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() - 2);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>
http://jsfiddle.net/sgfc5bz1/1/
Any suggestions?
I'm trying to disable years from my "YearPicker?", it's a DatePicker where you're only able to pick years. I need to disable all years and enable only a range of years (From 2012 to now, for example).
I'm using the JQueryUI DatePicker and it looks like this:
CSS:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
JS:
<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({
viewMode: 2,
format: 'yyyy',
maxDate: new Date(new Date().getFullYear(), 11, 31),
minDate: new Date(2012, 0, 1)
});
})
</script>
HTML:
<label>Year: <input class="form-control" type="text" id="datepicker"></label>
You can make what you're doing work, yet I think it's a bit more work than is needed. I would suggest maybe consider using Autocomplete instead. Take a look:
$(function() {
$("#datepicker").autocomplete({
minLength: 0,
source: function(req, resp) {
var today = new Date();
var min = today.getFullYear() - 6;
// Adjust above as needed, currently 6 years before this year
var results = [];
for (min; min <= today.getFullYear(); min++) {
results.push(min.toString());
}
resp(results)
}
}).focus(function(e) {
$(e.target).autocomplete("search", "");
});
})
<link rel="stylesheet" href="https://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>
<label>Year: <input class="form-control" type="text" id="datepicker" data-years="6"></label>
Can move this to it's own function if needed too.
var function makeYearList(n){
var today = new Date();
var min = today.getFullYear() - n;
var results = [];
for (min; min <= today.getFullYear(); min++) {
results.push(min.toString());
}
return results;
}
You can also adjust the theming to list them horizontally versus vertically.
Hope that helps.
Solved! I was importing Bootstrap DatePicker and JQueryUI DatePicker, I thought that I was using the second one only, but the app was detecting only the first one, my code now is like this and working:
$('#datepicker').datepicker({
minViewMode: 2,
format: 'yyyy',
startDate: '2012',
endDate: 'y'
});
Thanks all for helping!
You could specify simple strings as well to achieve the desired formatting:
{
format: 'MM/yyyy',
startDate: '01/2022',
endDate: '12/2022',
}
I am trying to use video.js(gitHub link - https://github.com/videojs/video.js ) plugin in my jquery mobile project to get custom video player, I followed all the documentation from this site (http://videojs.com/), but due to some reasons I am getting following errors -
The element or ID supplied is not valid. (videojs).
this[a] is not a function.
My code -
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Js/jquery.js"></script>
<script src="Js/jquery.signalR-2.1.2.min.js"></script>
<script src="Js/jquery.mobile-1.4.5.js"></script>
<link href="mcss/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script type="text/javascript">
videojs("Mobile_VIDEO_1").ready(function () {
var vid = this;
vid.on("ended", function () {
alert("is");
$("#videoListXYZ").css("display", "block");
});
});
</script>
</head>
<body>
<div data-role="page" id="p-forget-password">
<div data-role="main" class="ui-content ui-body-cf ui-responsive">
<!-- inserted dyanamically using handlebars template "http://handlebarsjs.com"/ -->
<video id="Mobile_VIDEO_1" class="video-js vjs-default-skin" controls data-id="{{VideoId}}" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "360" } } }' autoplay="autoplay" width="340" height="250">
<source src="{{Path}}" type="video/mp4" data-res="360" />
</video>
</div>
</div>
</body>
Please help me to find out what I am doing wrong.
-I tried using putting videojs(xyx).ready(....) inside document.ready
- I also tried sending my script at the bottom of my page as suggested by (http://help.videojs.com/discussions/problems/985-api-ready-call-fails), but it still not working
After many hit and trial, I realized that my event is firing much before the DOM initialization, so I searched for how to check when the whole page is fully loaded and I come across this document (https://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/) from this link I used this
$(window).bind("load", function() {
// code here
});
to check if my page is fully loaded or not . my final solution is mentioned below , if any of you come across a better solution then please share that to help others.
$(window).bind("load", function () {
var videoPath = $('#sv1').attr('src'); //to get the path of video
if (videoPath != "" && videoPath != null) { //checking for non-empty path
console.log(videoPath);
videojs('MY_VIDEO_1', { "plugins": { "resolutionSelector": { "default_res": "360" } } }, function () {
console.log('Good to go!');
this.play();
this.on('ended', function () {
console.log('awww...over so soon?');
$("#videoList").css("display", "block");
});
});
$("#replay").click(function () {
var myPlayer = videojs("MY_VIDEO_1");
myPlayer.play();
});
}
});
I have a jQueryUI datepicker, which was created with dateFormat: 'dd/mm/yy'. If I use a regular HTTP POST or HTTP GET request, the input is passed effectively in dd/mm/yy format, but when I use the datepicker's getDate method in any script, I get something like 'Wed Oct 05 2011 00:00:00 GMT-0430 (Venezuelan Standard Time)'.
Is there a way I could get the date in the dateFormat of the datepicker (or any format)?
Of course I could use the value of the text input that contains the datepicker, but I would prefer using a method from the widget.
getDate() should be returning a JavaScript Date object, so any of the Date methods should work for you.
I.E.
var date = $("#yourId").datepicker('getDate');
console.log(date.getDay()); //Returns day of the week 0-6
console.log(date.getDate()); //Returns day of the month 1-31
//etc...
Date Object Reference
Try something like this:
var date = $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy' });
To console.log and deal with datepicker function you can try this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Icon trigger</title>
<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({
buttonImageOnly: true,
buttonText: "Select date"
});
$('#datepicker').datepicker()
.on("input change", function (e) {
console.log("Date changed: ", e.target.value);
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
This is how I do it :
jQuery("#select-date-id").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected) {
var selectedDate = $(this).datepicker('getDate');
console.log(selectedDate); // log the value in the console
}
});