I'm trying to add todays date inside a div when a checkbox has been checked. I can get this to work in the console but not on the page. I don't get any console errors when I run the script in the console or whne the page is loaded. I've tried adding:
$( document ).ready(function()
to the script, but I get an error. Here is my script:
function GetTodayDate() {
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('input[name=cb-switch]').is(':checked') {
$('div#startDate').html(currentDate).appendTo(document);
}
};
Any help appreciated. Thanks in advance.
this is a simple example .you can use this code.
I hope is useful for you.
<script type="text/javascript">
$(document).ready(function()
{
$('#myid').change(function()
{
if ($(this).prop('checked'))
{
var tdate = new Date();
var dd = tdate.getDate(); //yields day
var MM = tdate.getMonth(); //yields month
var yyyy = tdate.getFullYear(); //yields year
var currentDate = dd + "/" + ( MM+1) + "/" + yyyy;
$('div#startDate').append("<p>"+currentDate+"</p>");
}
else {
alert("You have elected to turn off checkout history."); //not checked
}
});
});
</script>
myid is id of your checkbox
In your document ready you are missing the click event handler for changes.
$('input[name=cb-switch]').click(GetTodayDate)
IF you only want to call the function on load do
$(document).ready({
GetTodayDate();
});
It looks like there is a minor issue, is(':checked') a Boolean value. and since it is not under if statement it might be saying unexpected {. so change that line of code to:
if($('input[name=cb-switch]).is(':checked')) {
$('div#startDate').html(currentDate);
}
And it will work when you call your method.
To call your method do this:
$("input[name=cb-switch]").change(function(){
GetTodayDate();
});
Hope this helps.
Cheers!!!
Related
So my code is as below:
var date = new Date();
var active_dates = [<?php
$i=0;
for($i=0;$i<=count($booked_dates);$i++) {
echo "'".$booked_dates[$i]."',";
}
?>];
date.setDate(date.getDate()+1);
$('#single_datepicker_1').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
templates: arrows,
startDate: date, //disable all old dates
setDate: date, //tomorrow's date allowed
multidate: true,
format: 'dd/mm/yyyy',
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'bookedDates'
};
}
return;
}
//maxDate: '28/12/2019'
});
Now the code which prevent booked dates clickable and display alert message:
$('.bookedDates').click(function(event) {
console.log('Preventing');
event.preventDefault();
event.stopPropagation();
alert("fdf");
});
Now, based on above code my datepicker looks like below:
However, the issue is when I go to the next month like, April then the alert message is not displaying and the reason is, April month is not initially loaded on datepicker. As current month is March.
So if you click on any below dates alert message won't be display:
can anyone please let me know what I should do so that the alert message will display if I click on April month dates.
Thanks:)
The library provides a way to disable some dates. Simply pass this as part of your options.
datesDisabled: [date_sttings],
Or you can pass a single date string. Note the date strings must follow the date format you already defined.
Alternatively you can have an array of disabled dates. And when users select a date. You first check to see if its in the array of disabled dates. If it is, you then show the alert and perform other actions as you please.
I am manipulating a WordPress calendar plugin. I'm trying to add some CSS to the dates on the calendar for every day up to the current date. The plugin that I'm using, has the calendar in a table. The code for an individual day looks like this:
<td class="day-with-date" data-date="2017-5-10">
<div class="day-number">10</div>
</td>
I'm trying to use jQuery to loop through the dates from the data attribute.
This is my script.
$('.day-with-date .day-number').each(function(element){
var dataNumber = "[data-date=" + $(this).text() + "]";
var dataDateDay = "[data-date="+day+"]";
var textDay = $(this).text();
if(textDay <= day){
$('td.day-with-date .day-number').addClass('online-display');
}else if(textDay > day){
$('td.day-with-date .day-number').removeClass('online-display');
}else{
console.log("error douche");
}
});
What it's doing, is adding the CSS because textDay is <= than day. But it's removing the class after it's applied. I'm trying to get the CSS to add for all days up to today's date, then remove the CSS for days after.
How can I loop through the calendar dates, then apply my CSS class to all days up to the current date?
Thanks in advance!
There needs to be a change in your .each function:
$('.day-with-date .day-number').each(function(index) {
var dataNumber = "[data-date=" + $(this).text() + "]";
var dataDateDay = "[data-date=" + day + "]";
var textDay = $(this).text();
if (textDay <= day) {
$(this).addClass('online-display');
} else if (textDay > day) {
$(this).removeClass('online-display');
} else {
console.log("error douche");
}
});
You can try it here: https://jsfiddle.net/k99o5b39/
Try this
... // day has been defined
$('.day-with-date .day-number').each(function(element){
var parsedDay = Number.parseInt(element.text());
if(parsedDay <= day){
element.addClass('online-display');
} else {
element.removeClass('online-display');
}
});
I'm somewhat new to JavaScript and jQuery
I'm using jQuery prepend() to create a new div with the class of "X" and inside the new div I need to have the result or the current year and a disclaimer.
My jQuery code:
$(document).ready(function() {
$('#footer').prepend('<div class="disclaimer">current year + disclaimer text</div>');
});
So far I am able to create the new div inside the div with the disclaimer but not the current year.
My JavaScript for current year:
now = new Date
document.write(now.getFullYear())
You mean
$(function() {
$('#footer').prepend('<div class="disclaimer">'+
new Date().getFullYear() +
' disclaimer text</div>');
});
You can concatenate that variable into the string:
$(document).ready(function() {
var now = new Date()
$('#footer').prepend('<div class="disclaimer">' + now.getFullYear() + ' + disclaimer text</div>');
});
It's just about as straightforward as your example. To play it safe (if you needed to have <, >, etc. in your disclaimer text, for instance), use .text() to add the contents:
$(document).ready(function() {
var discText = "disclaimer text";
var currentYear = (new Date()).getFullYear();
$('<div class="disclaimer"></div>').
text(currentYear + " - " + discText).
appendTo('#footer');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<footer id="footer"></footer>
I have here a code that every time the page reloads an alert will pop up. But I want the alert box to pop up once. For example, whenever I open that page an alert will pop up but if I reload that page, there will be no alert box that will pop up. Anyone knows how I can do that?
Here's my code for the alert box:
<script type="text/javascript">
window.onload = function () {
alert("Sending of SMS is scheduled TODAY!");
//dom not only ready, but everything is loaded
}
</script>
Thanks for the help in advance.
Do as below:
<script type="text/javascript">
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1; //months from 1-12
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var today = year + "/" + month + "/" + day;
window.onload = function () {
var item = localStorage.getItem("alertShown_"+today);
if ( item === null || item != "Yes") {
//check if localStorage has value or it is == "Yes"
alert("Sending of SMS is scheduled TODAY!");
localStorage.setItem("alertShown_"+today,"Yes"); //set some value for future check
}
}
</script>
I want to get the date from datepicker whenever user choose the date in jQuery UI datepicker and click the button on the form.
well I need to get the day, month and year of the date they choose. How can I get the date form jQuery UI?
Use
var jsDate = $('#your_datepicker_id').datepicker('getDate');
if (jsDate !== null) { // if any date selected in datepicker
jsDate instanceof Date; // -> true
jsDate.getDate();
jsDate.getMonth();
jsDate.getFullYear();
}
You can retrieve the date by using the getDate function:
$("#datepicker").datepicker( 'getDate' );
The value is returned as a JavaScript Date object.
If you want to use this value when the user selects a date, you can use the onSelect event:
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
}
});
The first parameter is in this case the selected Date as String. Use parseDate to convert it to a JS Date Object.
See http://docs.jquery.com/UI/Datepicker for the full jQuery UI DatePicker reference.
Try this, works like charm, gives the date you have selected.
onsubmit form try to get this value:-
var date = $("#scheduleDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
Reference here
the link to getdate: https://api.jqueryui.com/datepicker/#method-getDate
$("#datepicker").datepicker( 'getDate' );
Sometimes a lot of troubles with it. In attribute value of datapicker data is 28-06-2014, but datepicker is show or today or nothing. I decided it in a such way:
<input type="text" class="form-control datepicker" data-value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" />
I added to the input of datapicker attribute data-value, because if call jQuery(this).val() OR jQuery(this).attr('value') - nothing works. I decided init in cycle each datapicker and take its value from attribute data-value:
$("form .datepicker").each(function() {
var time = jQuery(this).data('value');
time = time.split('-');
$(this).datepicker('setDate', new Date(time[2], time[1], time[0], 0, 0, 0));
});
and it is works fine =)
NamingException's answer worked for me. Except I used
var date = $("#date").dtpicker({ dateFormat: 'dd,MM,yyyy' }).val()
datepicker didn't work but dtpicker did.
I just made some web scraping to discover the behaviour of JequeryUI datepicker, it was necessary for me because I'm not familiar with JS object so:
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day = $(".ui-state-active").text();
it just pick the value in relation of the changing of class, so you can implement the onchange event:
$(document).on('change', '#datepicker', function() {
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year ) ;
});
or check if the current day is selected:
if( $("a").hasClass("ui-state-active") ){
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year );
}