We Keep Coding

How does JqueryUI read data on your jquery request when downloading data?

I have date picker and want my date picker to be able get below data that is available, no matter if a user select last year date. eg. 2019-12-04.
On my jquery request I can only get this year date, anyone who can help me to achieve such logic. The logic is below if perhaps I am not making a sense.
HTML:
<!---DatePicker for startDate and endDate ---->
<div class="d-flex justify-content-start">
<div class="col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from" placeholder="startdate" />
<span class="input-group-addon">To</span>
<input type="text" class="input-sm form-control" placeholder="enddate" />
</div>
</div>
</div><br/>
<br/>
<br/>
Javascript:
// date functionality
$(document).ready(function() {
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
autoclose: true
});
});
//checking equality for channel fields on thingspeak.
$(function() {
$("#download").click(function(e) {
e.preventDefault();
var isTemperature = $('#temperature').is(':checked');
var isButtonState = $('#button_state').is(':checked');
if (isTemperature && isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/feeds.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
} else {
if (isTemperature) {
window.open('https://api.thingspeak.com/channels/952961/fields/1.csv?api_key=FDJCRN71YJM2R0FM&timezone=Africa/Johannesburg');
} else {
if (isButtonState) {
window.open('https://api.thingspeak.com/channels/952961/fields/8.csv?api_key=FDJCRN71YJM2R0FM&start=2020-01-06T00:00+02&end=2020-01-10T23:59+02:00&timezone=Africa/Johannesburg');
}
}
}
});
});

I made some attempts and finally got it working, but doing this logic below;
// date functionality
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
format: "dd-mm-yyyy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});

Can't pick minDate in momentjs

I'm using a date picker to let the user select a date between 100 days in the past and today. It works fine, but there is an issue I can't solve.
Apparently, minDate is calculated and applied correctly in the picker. Dates which are older than 100 days are shown in gray and not selectable. The problem is that the first available day, shown in black, is not selectable neither. When the pointer hovers such date, it correctly turns to a hand, but when clicked, the picker closes and shows current date instead.
All other dates, from the second oldest, work properly.
<!--Campo de fecha-->
<div class="form-group" <?php echo $mostrarDiv; ?>>
<div>
<label for="fecha" class="etiquetaDeCampo"><span class="fas fa-calendar-day"></span> Selecciona la fecha del suceso:</label>
<div class="msgError" id="errorFecha">
<p>Selecciona la fecha.</p>
</div>
</div>
<?php
if(isset($_SESSION['fecha']) && $_SESSION['fecha'] != ""){
$fecha = $_SESSION['fecha'];
} else {
$fecha = "";
}
$fecha = 'value="'.$fecha.'"';
?>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" name="fecha" id="fecha" class="form-control datetimepicker-input campoDeDatos" data-toggle="datetimepicker" data-target="#datetimepicker" <?php echo $fecha; ?>/>
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var dateFormat = "DD-MM-YYYY";
var CurrDate = new Date();
var limitePasado = new Date();
limitePasado.setDate(limitePasado.getDate() - 100);
dateCurr = moment(CurrDate, dateFormat);
$('#datetimepicker').datetimepicker({
format: 'DD-MMM-YYYY',
locale: 'es',
defaultDate: CurrDate,
showToday: true,
maxDate: dateCurr,
minDate: limitePasado,
});
});
</script>
<!--Fin de fecha-->

var CurrDate = moment();
var limitePasado = moment().subtract(100, "days");
also try
maxDate: moment(),
minDate: moment().subtract(100, "days"),
use this

how to validate only one years of dates in jQuery datepicker

I want to validate within one years months and dates, and i created to allow only one year of dates but its not validated.
For example
Im created with in one year, Current date is 7/11/2019, i can allowed to pick date upto 7/11/2020, thats im created working fine.. but if i enter some date in manually its allowed. example: if i enter (type manually) 1/1/2022 its allowed.. i dont want to allow overthan 1 year dates.. how to validate this??
hope my question is understand..
Example Fiddle here..
FIDDLE HERE..
Example code here..
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>

I have change in your code, see below answer.
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
$(document).on( ' input change', '#vochDate', function(){
$('.err').remove();
const nr_years = 1;
var maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + nr_years));
var curDate = $(this).datepicker("getDate");
if (curDate > maxDate) {
//alert("invalid date");
$('#vochDate').after('<span class="err"> Invalid Date </span>');
$(this).datepicker("setDate", new Date());
}
})
});
.err {
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>

Use change event to validate on change. Here you can have a look
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "mm/dd/yy",
maxDate: '1y',
minDate: "-10m"
});
$("#vochDate").change(function(){
if((new Date($("#vochDate").val()).getTime()-new Date().getTime())/(1000*3600*24)>365){
alert("invalid")
//
}
})
});

Bootstrap datepicker show dates only

Is it possible to show only dates in Bootstrap datepicker ?
I am showing only months and years using following methods -
$("#year").datepicker({
format: " yyyy",
viewMode: "years",
minViewMode: "years"
});
$("#month").datepicker({
format: " mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
});
A live demo showing only year and month selection in Year and Month field. I want to show only date from 1 to 31 without Month, Year at the top and also without day's name, at the Date field.

Yes, it is possible, but a bit complicated, you have to:
Set the format option to d (or dd)
Set maxViewMode option to 0 (minViewMode is 0 by default)
Hide prev/next month buttons and the month name button, you can do it using CSS:
the days view of the datepicker is inside a table that has .datepicker-days class
the prev and next button are inside the .datepicker-days table and they have .prev and .next classes
the month name is in the same table and it has the .datepicker-switch class
The date datepicker should show the right number of days, so you have to dinamically update defaultViewDate when year and month are selected (see changeDate event)
Since the picker has no setter method for defaultViewDate, you can destroy it and then re-init it.
Here a full working sample:
$(document).ready(function() {
var dateOpt = {
format: 'dd',
maxViewMode: 0
};
$("#year").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
}).on('changeDate', function(e) {
var month = $('#month').datepicker('getDate');
if( !month ){
month = new Date();
}
dateOpt.defaultViewDate = {
year: e.date.getFullYear(),
month: month.getMonth(),
day: 1
};
// Reset date datepicker
$('#date').datepicker('destroy');
// Re-init with defaultViewDate option
$('#date').datepicker(dateOpt);
});
$("#month").datepicker({
format: "mm",
viewMode: "months",
minViewMode: "months",
maxViewMode: 0
}).on('changeDate', function(e) {
var year = $('#year').datepicker('getDate');
if( !year ){
year = new Date();
}
dateOpt.defaultViewDate = {
year: year.getFullYear(),
month: e.date.getMonth(),
day: 1
};
$('#date').datepicker('destroy');
$('#date').datepicker(dateOpt);
});
$("#date").datepicker(dateOpt)
});
/* Hide prev/next buttons and month name*/
.datepicker-days>table>thead>tr>th.prev,
.datepicker-days>table>thead>tr>th.datepicker-switch,
.datepicker-days>table>thead>tr>th.next {
display: none;
}
/* Hide days of previous month */
td.old.day{
visibility: hidden;
}
/* Hide days of next month */
td.new.day{
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Year</label>
<div class="col-md-9">
<input type="text" id="year" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Month</label>
<div class="col-md-9">
<input type="text" id="month" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="form-control-label col-md-3" for="year">Date</label>
<div class="col-md-9">
<input type="text" id="date" class="form-control">
</div>
</div>
</div>

Set Current Date as Selected in Bootstrap datepicker

I am using bootstrap-datepicker in my code. How Do I select current date in JavaScript and show it as selected?
After research this is code I am using but current day does not appear as selected:
var today = moment();
datepicker1.datepicker({
endDate: today.toDate()
});
datepicker2.datepicker({
startDate: today .toDate(),
endDate: today.toDate()
});
datepicker1.datepicker('setDate', today.toDate());
datepicker2.datepicker('setDate', today.toDate());
datepicker1.datepicker('update'); //update the bootstrap datepicker
datepicker2.datepicker('update');

Im using bootstrap datepicker. below code worked for me:
$('#my-datepicker').datepicker('setDate', 'now');

No idea about the code you are using and without HTML markup doesn't make much sense,
Here is a working example of what you are after
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>

The problem in selecting currentdate when using minDate : moment().
The solution is to use below code for assigning datetimepicker:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});

This works for me
$("#order_date").datepicker( {
autoclose: true,
});
var orderDate = '2021-03-05';
$('#order_date').datepicker('update', new Date(Date.parse(orderDate)));
Reference

$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>

With this you can highlight current date!
$('#datetimepicker6').datetimepicker({
todayHighlight:true
})