set default today date and time from server in datetimepicker addon - javascript

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>

Related

Kendo Js: Show previous dates which are disabled

I am facing an issue using Kendo Js Date Time Picker.
The situation is: "I have a date time picker which can only allow dates from current time onwards. Those pages have already been saved, when I am trying to show the date, the dates aren't showing though it became a back date.
My concern is: The input should show the date which has already been saved(Whether that is past or present), but it shouldn't allow user to select back date.
The code are below.
<input id="datetimepicker" />
let options = { //Setting options for the datepicker
value: new Date(),
dateInput: true,
disableDates: function (date) {
if (date <= new Date()) {
return true;
} else {
return false;
}
},
};
$("#datetimepicker").kendoDateTimePicker(options);
const priorValue = new Date("8/31/2022 2:18 PM"); // Let Already selected date
let selector = "#datetimepicker";
let datetimepicker = $(selector).data("kendoDateTimePicker");
datetimepicker.value(priorValue);
datetimepicker.trigger("change");
function roundToNearest30(date) { //Function to round minutes to nearest 30 minute.
date = new Date(date);
const minutes = 30;
const ms = 1000 * 60 * minutes;
return new Date(Math.round(date.getTime() / ms) * ms);
}
For your reference a sample dojo
I need to show the selected date which is disabled.
You can use the disableDates configuration to disable prior dates and the month.content configuration to define how the dates will be rendered and show/hide dates conditionally:
<script id="cell-template" type="text/x-kendo-template">
<span class="#= (data.date <= new Date() && !isInArray(data.date, data.dates)) ? 'hidden' : 'visible' #">#= data.value #</span>
</script>
Here is a sample dojo.

Not right date is displayed

I use this daterangepicker: https://github.com/dangrossman/daterangepicker
I receive a date from database: so the format is: YYYY-MM-DD
Web client don't necessary use this format.
I tried that
<input type="text" id="samplingsBuildDatePicker" name="receptionDate" class="form-control">
$('#samplingsBuildDatePicker').daterangepicker({
singleDatePicker: true
});
var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
$('#samplingsBuildDatePicker').data("daterangepicker").setStartDate(dateStart);
Current day is displayed instead of the first day of the year...
Edit
I added a text area
$("#remark").val(dateStart);
It's the correctly value who is displayed: 01/01/2018... date picker don't working
The problem is here var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
You are receiving date from DB in YYYY-MM-DD format and you want to convert to DD/MM/YYYY.
Check the below working example for how to do this:
var dateStart = moment("2018-01-01").format("DD/MM/YYYY");
console.log(dateStart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
So, make the following changes:
var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
Change to:
var dateStart = moment("2018-01-01").format("DD/MM/YYYY");
You are Done!

How to set selected date on Jquery Calendar Plugin

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">

javascript to update Joomla text field on page load

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;

Fire Javascript alert when counter reaches 10 minutes

I have a page that updates whenever another entry is added to the database. It displays the timestamp, and then starts counting up using jQuery, along with moment.js to help with time formatting. This is the code for that:
$(function () {
var austDay = new Date('".$array['dateAdded']."');
$('#since".$array['id']."').countdown({since: austDay, significant: 1, layout: '{d<}{dn} {dl} {d>}{h<}{hn} {hl} {h>}{m<}{mn} {ml} {m>}{s<}{sn} {sl}{s>}'});
});
I need to be able to fire an alert whenever a given entry is 10 minutes past the timestamp date and time. I assume the script would need to continually check to see if that's the case. Any help would be greatly appreciated.
This is the solution I came up with for this problem, using a mix of Javascript and PHP.
$now = date("Y-m-d h:i:s");
$plusTen = date("Y-m-d, h:i:s", strtotime("+10 minutes", strtotime($array['dateAdded'])));
$difference = strtotime($plusTen) - strtotime($now);
$difference = round($difference,2) * 1000;
if($difference > 0){
echo '<script type="text/javascript">
setTimeout(function(){staleAlert();}, '.$difference.')
</script>';
}

Categories

Resources