reset rich:calendar value on jsf form using java script - javascript

I am trying to reset value of rich:calender input box via java script but couldnt do it any way at all. the UI of my form (snippet only) is...
<rich:calendar id="startDate" datePattern="dd MMM yyyy" value="#{classBean.startDate}" popup="true" onchanged="calcDuration();">
</rich:calendar>
the java script is
function calcDuration()
{
sdate =$('frm_course:startDate').component.getSelectedDateString("dd MMM
yyyy");
var currentdate = new Date();
var sdatecmp = new Date(sdate);
if(sdatecmp > currentdate)
{
alert('The Start Date is Greater than today!');
$('frm_viewCourseDetail:startDate').component.value = ""; // 1
document.getElementById('frm_course:startDate').value =""; // 2
}
}
None of the lines 1 and 2 resets the richcalender's value. Help is required here. thanks.

The calendar (and other components) is backed by a JavaScript object which has the methods you need.
Use either #{rich:component('startDate')} or RichFaces.$('startDate') to get a reference to that object and then call resetValue().
For other methods check the docs

Related

Disable custom dates in date range picker from code behind in ASP.Net

I Have code like this :
<script type="text/javascript">
var some_date_range = ['20-10-2017','24-10-2017','27-10-2017','28-10-2017','25-10-2017'];
$('#daterange').daterangepicker({
isInvalidDate: function (date) {
for (var ii = 0; ii < some_date_range.length; ii++) {
if (date.format('DD-MM-YYYY') == some_date_range[ii]) {
return true;
}
}
}
})
</script>
I want block custom date in date range picker, and usually i put variable into javascript and code worked, how if i set variable date from code behind using textbox or label in ASP.Net .
please your advice
This code will disable custom dates in date range picker.
var naArray = ["20170822", "20170823", "20170824", "20170825"];
function isDateAvailable(date){
return naArray.indexOf(date.format('YYYYMMDD')) > -1;
}
$('input[name="daterange"]').daterangepicker({
isInvalidDate: isDateAvailable
});
Okay... it's not entirely clear what you want here, but it sounds like you just want to know how to set the javascript array variable with ASP, in which case you would simply write:
var some_date_range = [<%= name_of_your_array_variable_from_asp %>];

jQuery date picker read date from text file

I’m trying to read dates from a text file for example - '08/12/2017'
$.get('disableDays.txt', function(data) {
var disableSpecificDays = data;
The values are getting read. I'm then trying to disable dates in the datepicker based on text file entries
It works when I set the value like this:
addDates: ['08/12/2017', '10/14/2017'],
This doesn’t work :
addDates:+ disableSpecificDays,
I’ve tried setting as array but I know jquery is not same as array and like:
addDates:+ $('#disableSpecificDays').val,
var today = new Date();
var y = today.getFullYear();
var dates = $('#full-year').multiDatesPicker({
//addDates: ['08/12/2017', '10/14/2017'],
//addDates:+ $('#disableSpecificDays').val,
addDates:+ disableSpecificDays,
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
beforeShowDay: $.datepicker.noWeekends
});
What I am doing wrong?
Can I write back to the text file with:
file_put_contents($file, $current);

Set date for C1WebDateEdit control on page load

I have a webdateedit control. On the page load I want to set a date to that control through javascript. I have tried the following but its not working,
var userid='<%=Session("userid").toString %>'; // 20-Dec-2013
var strdate=dtsheet.split("-");
var sheetdate =new Date(strdate[2] +"/"+ changemonth(strdate[1]) +"/"+ strdate[0]); //changemonth will give 12
dtpstartdate.setDate(sheetdate.getDate); //it is not working
design:
<c1i:C1WebDateEdit ID="dtpstartdate" runat="server" OnClientdateChanged="javascript:enable(true);" WebCalendar="postartdate" OnDateChanged="dtpstartdate_DateChanged">
</c1i:C1WebDateEdit>
What could be the reason?
I suggest you start by looking at the html produced by C1WebDateEdit control. Then find the input which holds the date value.
Once you found it change the javascript to set the value of that input.
var userid='<%=Session("userid").toString %>'; // 20-Dec-2013
var strdate=dtsheet.split("-");
var sheetdate =new Date(strdate[2] +"/"+ changemonth(strdate[1]) +"/"+ strdate[0]);
document.getElementById('id of generated input here').value = sheetdate;
I found my own solution. to set date for a c1WebdateEdit control, use the following code
var strdate=dtsheet.split("-");
var sheetdate =new Date(strdate[2] +"/"+ strdate[1] +"/"+ strdate[0]);
<%=dtpstartdate.ClientObjectID%>.set_Value(sheetdate);
to get the date,
var dt=<%=dtpstartdate.ClientObjectID%>.get_Value();

Change div class based on date

I'm building a little webpage to list the outstanding assignments I have at college.
Here's the code:
<div class="assignment">
<div class="itemt green">DUE: 28/03/2014</div>
</div>
Here's the actual page: www.edavies.co/wkc
I would like the class green to be used if before the due date, the class amber for two weeks before the due date and finally the class red for one week before. If possible it would be cool to have black on the due date and afterwards.
Hope this makes sense. Anything is fine, PHP, JavaScript, jQuery.
check http://jsfiddle.net/NhmW7/, test it changing those dates.
the function i made for this problem.
$( ".itemt" ).each(function() {
var text=$(this).text();
var res = text.split(" ");
var resta = res[1].split("/");
var dd=resta[0];
var mm=resta[1];
var yy=resta[2]; // i couldnt test with dd/mm/yyy format, so i changed to mm/dd/yyy
var now = new Date(); //"now"
var duedate = new Date(mm+'/'+dd+'/'+yy) // due date
var diff = Math.abs(now-duedate);
var each_day = 1000 * 60 * 60 * 24;//milliseconds in a day
var days = Math.round(diff / each_day);
if(days <= 14)
$(this).removeClass("green").addClass("amber");
if(days <= 7)
$(this).removeClass("amber").addClass("red");
if(days > 14)
$(this).addClass("green");
});
As you can use PHP it would be simple.
Add a placeholder in your html
<div class="item color_by_date_id1">DUE: 28/03/2014</div>
Then you parse the page on the request, replace the placeholder with a class name based on today's date and the date intervals for the particular placeholder, which could be stored in a server side config file or better, together with the items themselves.
The actual coding I am sure you can fix, after building the site already :)
I would go with the following route:
Store your assignments in a JSON array
{
"assignments": [
{
"name": "Assignment 1",
"dueDate": "11/03/2014"
},
{
"name": "Assignment 2",
"dueDate": "11/04/2014"
},
{
"name": "Assignment 3",
"dueDate": "11/07/2014"
}
]
}
Look into Handlebars, Mustache works too
Build a template and add some custom helper functions (tutorials on Handlebars) to alter the class depending on the dueDate
You could use Javascript for this. A solution with jquery should be something like adding the code below:
<script type="text/javascript">
$(document).ready(function(){
var dueDate = new Date(2014,3, 28);
var today = new Date();
if (today>= dueDate){
// or other conditions
$(".itemt").addClass("expired");
}else{
$(".itemt").addClass("expired");
}
});
</script>
This is the idea - you can manage the css class by comparing the date in javascript. Good luck!

Javascript/jquery age verification popup for magento

Okay, so I tried to integrate this datepicker to my magento page for the purpose of age verification.
I have successfully added the required CSS and jQuery script files to the head section of my magento page but I can't figure out where to add the html.
The package source is available here along with the html and javascript files.
I want to modify it so that when a person is over 18, they stay on the page and if not, they get redirected to google.com.
Can't get this working because I am not sure how to add the index.html file's code to my magento page. I'd really appreciate some help.
Or is there an alternate (simpler) way to put 'Age verification' WITH cookies, without using PHP script?
You can use following script for this validation may be it's help you.
<script>
function check_dob()
{
var month = document.getElementById('month').value;
var day = document.getElementById('day').value;
var year = document.getElementById('year').value;
var dbDate = year+'-'+month+'-'+day;
var today = new Date();
var birthDate = new Date(dbDate);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
if(age<=20)
{
alert("You are under "+age+" Year")
}
}
</script>
You need to put some/all of the html into your template, probably somewhere where it will be on every page. e.g. /app/design/frontend/package/_theme_/template/page/html/header.phtml

Categories