When a page loads, I need to add the current date in this format (mm/dd/yyy) into a Joomla form field using javascript. (the form extension does not have ability to do this) The field ID=938.
I tried using this code, but it is not working in Joomla so I assume there's a special code:
<script>
document.getElementById('938').value = (new Date()).format("mm/dd/yyyy");
</script>
Any help is appreciated.
JSN Uniform does not provide any option to display current date on field, so you can try following code.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10){
dd="0"+dd
}
if(mm<10){
mm="0"+mm
}
var today = mm+"/"+dd+"/"+yyyy;
document.getElementById('938').value = today;
Related
I am trying to generated invoice in tamil text using JSPDF with React-js. I have created a application which has print button and upon clicking it should generate PDF which I have described inside generateBill. I have added entire code in App.js file like below,
import React from 'react'
import { jsPDF } from "jspdf";
import {font} from './Lohit-Tamil-normal'
function App() {
function generateBill(event)
{
//Intializing jspdf
const doc = new jsPDF('p','mm',[200,80])
//Importing custom font for tamil
doc.addFileToVFS('Lohit-Tamil.ttf', font);
doc.addFont('Lohit-Tamil.ttf', 'Lohit-Tamil', 'normal')
doc.setFont('Lohit-Tamil');
//Adding text to pdf document
doc.text("பாத்திரக்கடை", 30,20);
//Calculating today date to display in PDF
let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();
today = dd + '/' + mm + '/' + yyyy;
//Displaying today's date
doc.text(`தேதி: ${today}`, 5, 25, null, null, "left");
//Displaying customer name
doc.text(`வாடிக்கையாளர் பெயர்:`, 5, 30, null, null, "left");
//Setting tamil as language for PDF
doc.setLanguage("ta")
//saving the PDF file
doc.save('autoprint.pdf');
}
return (
<button type="button" onClick={generateBill}>Print</button>
</div>
);
}
Code inside imported font file - Lohit-Tamil-normal.js:
export const font = '[base64_encoded_text_of_ttf_file]';
But when I try to generated pdf, I am getting the text misplaced like below.
Actual pdf:
But what I expect to be like:
Few of the text like "டை,தே" are getting misplaced in front and back.
But when I tried to copy the text from PDF and paste it in my system, I am getting it proper. It will be great if anyone could shed some light and get this issue fixed.
jspdf is not compatible with few unicode script.
so either try with non unicode tamil fonts https://github.com/neechalkaran/neechalkaran.github.io/tree/master/tamilfonts/nonunicode
or
use pdfmake which has compatibility for Tamil https://pdfmake.github.io/docs/getting-started/
I am developing a project with Django.
I have an html webpage containing a form which has a date field.
I want javascript compile it with today's date as soon as my user lands on that webpage, so that he/she gets a kind of "default date".
I have in my html page (templates/aggiungi_terminologia.html), the date field:
<div class="form-group">
<label for="glossary_entry_input_21">Data di inserimento della terminologia</label>
<small id="inputHelp" class="form-text text-muted">Compilare solo se è nota la data di pubblicazione del documento fonte, altrimenti inserire la data di oggi.</small>
<input name="Data_inserimento_entry" type="date" value="01/01/1900" class="form-control" id="date_to_turn_into_today" placeholder="">
</div>
and then the javascript call at the end of the form:
{% load static %}
<script> src="{% static 'get_today_date.js' %}"</script>
And then, inside my javascript function (static/js/get_today_date.js):
var today = moment().format('DD/MM/YYYY');
document.getElementById("date_to_turn_into_today").value = today;
and since I am using moment.js, I added 'moment' in settings.py> INSTALLED_APPS ,
and to install moment I run on my console:
pip install django-staticfiles-moment
But when I run the server, all I get on that field is this:
My console is returning:
WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry:
(fields.W161) Fixed default value provided.
HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to
have the current date as default, use django.utils.timezone.now
Why javascript is not replacing the date?
How can I make it work?
NOTE: the problem lies in the connection between js, html and django
Continue from comment about duplicated or not, take a look:
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById('inputDate').value = today;
<input type="date" id="inputDate" />
Please check this also.
I've seen similar behavior (where the input field shows a date placeholder instead of my desired date) when I provided a date string that was incorrectly formatted. The input element seems to need a format like yyyy-mm-dd.
Here's a pretty intuitive solution using vanilla JS. The default value of the input element will be the (locale-specific) date.
(And most of the further info you might want about JS Dates can be found here on MDN.)
const
// Selects input element
dateInput = document.getElementById("date"),
// Defines Date object
date = new Date(),
// Extracts component parts of Date object
year = date.getFullYear(),
month = date.getMonth(),
day = date.getDate(),
// Defines a function to add a leading zero if needed
pad = part => part < 10 ? "0" + part : part,
// Formats date to meet the `input` element's expectations -- like: `yyyy-mm-dd`
// (Adds +1 to month b/c `getMonth()` uses a zero-based array)
dateString = year + "-" + pad(month + 1) + "-" + pad(day);
// Inserts date string into input element
dateInput.defaultValue = dateString;
// Repeats this process for the "time" parts
/*
const
timeInput = document.getElementById("time"),
hours = date.getHours(),
minutes = date.getMinutes(),
seconds = date.getSeconds(),
timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
timeInput.defaultValue = timeString;
*/
<input id="date" type="date" />
<!--
// Optional input for time
<input id="time" type="time" />
-->
SOLVED
Here is what I did.
In a javascript file called
get_today_date.js
stored at path
static/js/get_today_date.js
I inserted
function get_today_date() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById('date_to_turn_into_today').value = today;
}
as suggested here https://stackoverflow.com/a/57953522/7658051 .
Then in the HTML page, before the closing </body> tag, I inserted
{% load static %}
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date() </script>
and it works perfectly.
There was no neet to install the module moment, and even if my console returns
WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry: (fields.W161) Fixed default value provided. HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to have the current date as default, use django.utils.timezone.now
my app works fine.
The previous code did not work just because I forgot to call the function in HTML, so I just had to add
get_today_date()
But in the end I am not sure if I correctly installed the moment module required for the previuos javascript script.
So I am using the calendar app on a page that has a set date. I have it so when you click on the calendar, whatever is in the input that has the date, gets changed to the date you clicked on.
When you load into the page I want whatever date that is in the input to be what the calendar is set to. Thanks.
LINK TO PLUGIN - https://www.jqueryscript.net/time-clock/Simple-jQuery-Calendar-Date-Picker-Plugin-DCalendar.html
var pageDate = "4/04/2018";
<input class="date">
$('.date').val(pageDate);
// Make above date the selected date
// Code below is for setting input to date you select. Currently works.
$('.box').dcalendarpicker({
format: 'mm-dd-yyyy'
}).on('datechanged', function(e) {
console.log('Date change');
var d = e.date;
selectedDate = moment(d, 'MM-DD-YYYY');
var theDate = selectedDate._i;
$('.date').val(theDate);
var weekdayLongform = selectedDate.format("dddd, MMMM");
var dateLongform = selectedDate.format(" D");
var yearLongform = selectedDate.format(" YYYY");
});
Just set the date as the value of the input (in the same format specified in the plugin initialization). That will do the trick.
<!-- value specifid as mm-dd-yyyy -->
<input class="date" value="03-11-2018">
Need to set default date and time from server in datetime picker.I can choose a setDate but i need to set today highlighted date from server,and click now button it should shows the server date and time.please suggest some solution.
http://trentrichardson.com/examples/timepicker/
https://github.com/trentrichardson/jQuery-Timepicker-Addon
var dt = new Date("2015 10 12,10:00:00");
$('#basic_example_1').datetimepicker();
$("#basic_example_1").datetimepicker('setDate', dt);
DEMO
frame your code like this
<script type="text/javascript">
var dt = new Date("<?php echo date('Y m d,H:i:s'); ?>");
$('#basic_example_1').datetimepicker();
$("#basic_example_1").datetimepicker('setDate', dt);
</script>
I am trying to use JavaScript to validate that the date selected is not earlier than today, but when I select today's date it's showing the alert box.
JavaScript:
function checkDueDate(sender, args) {
var td = new Date();
td.setMinutes(59);
td.setSeconds(59);
td.setHours(23);
//to move back one day
td.setDate(td.getDate() - 1);
if (sender._selectedDate < td) {
alert("You can't select day from the past! " + td + "");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
ASP.NET:
<asp:TextBox ID="txtDueDate" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="txtDueDate_CalendarExtender" runat="server"
TargetControlID="txtDueDate" OnClientDateSelectionChanged="checkDueDate">
</asp:CalendarExtender>
I think maybe you're complicating things too much. I would just subtract a day in miliseconds and it should work:
function isPast( date ) {
return date.getTime() < (new Date().getTime() - 864e5);
}
Demo: http://jsbin.com/igeyov/1/edit
the logic you have here seems to do exactly what you want - you have set the td variable which you evaluate against to the last possible second of todays date and you are checking if the selected date is before or equal to that. Todays date IS "before or equal to" 23:59:59 today...
Also, you have tagged this with c# , although it is all javascript and ASP.net as far as I can tell.
if you want to do select only future dates then you can try this code also....this is working with ajax calendar:
function checkDate(sender, args) {
if (sender._selectedDate < new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
Here is the HTML code:
<asp:TextBox ID="txtDOB" Width="180px" MaxLength="50" runat="server"></asp:TextBox>
<ajaxctrl:calendarextender onclientdateselectionchanged="checkDate" id="cale_txtDOB"
runat="server" targetcontrolid="txtDOB" format="MM/dd/yyyy" cssclass="cal_Theme1">
</ajaxctrl:calendarextender>
This code works only if you select past dates it will show a pop up " that you can not select past dates" whatever be it.
UPDATED CODE:
Here is code work if you dont want to include today's date also, you just want future dates only:
function checkDate(sender, args) {
if (sender._selectedDate <= new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
//sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
hope this will help you..