Comment désactiver les dates passées de la date actuelle sur un datetimepicker? J'ai essayé quelques articles pour une question similaire, mais j'étais incapable de l'obtenir. Voici ce que j'ai essayé.
<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
</script>
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
<i data-date-icon="icon-calendar">
</i>
</span>
J'ai aussi essayé
$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true, minDate:'0d' });
et
$("#datetimepicker2").datepicker({ minDate: 0 });
Donnez zéro à mindate
et cela supprimera les dates passées.
$( "#datepicker" ).datepicker({ minDate: 0});
voici une Live fiddle exemple de travail http://jsfiddle.net/mayooresan/ZL2Bc/
minDate: dateToday
ou minDate: '0'
est la clé ici. Essayez de définir la propriété minDate.
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true,
minDate: dateToday // minDate: '0' would work too
});
});
Problème résolu :)
ci-dessous est le code de travail
$(function(){
$('#datepicker').datepicker({
startDate: '-0m'
//endDate: '+2d'
}).on('changeDate', function(ev){
$('#sDate1').text($('#datepicker').data('date'));
$('#datepicker').datepicker('hide');
});
})
$(function () {
$("#date").datepicker({ minDate: 0 });
});
essaye ça,
$( "#datepicker" ).datepicker({ minDate: new Date()});
Ici, nouvelle date () implique la date du jour ....
Cela fonctionnera:
var dateToday = new Date();
$(function () {
$("#date").datepicker({
minDate: dateToday
});
});
Essaye ça,
$("#datetimepicker2").datepicker({ startDate: "+0d" });
var dateToday = new Date();
$('#datepicker').datepicker({
'startDate': dateToday
});
<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
<input type="text" class="form-control" id="input_id" name="input_name" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
Si vous souhaitez définir la date de chargement de la page, utilisez ceci:
$('#datetimepicker1').datetimepicker({
minDate: new Date()
});
Cela définira la date du jour comme date de début lors du chargement de la page et désactivera toutes les dates précédentes.
Mais si vous voulez définir la date au clic d'une zone de texte particulière au lieu de la définir au chargement de la page, utilisez ceci: $('#datetimepicker1').datetimepicker();
$("#datetimepicker1").on("click", function (e) {
$('#datetimepicker1').data("DateTimePicker").minDate(new Date());
});
Au lieu de new Date (), nous pouvons utiliser n'importe quelle chaîne spécifiant Date dans un format que nous spécifions si nous ne voulons pas définir la date actuelle comme date minimale . E.g:
$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");
vous venez d'introduire le paramètre startDate comme mentionné ci-dessous.
var todaydate = new Date();
$(".leave-day").datepicker({
autoclose: true,
todayBtn: "linked",
todayHighlight: true,
startDate: todaydate
}
).on('changeDate', function (e) {
var dateCalendar = e.format();
dateCalendar = moment(dateCalendar, 'MM/DD/YYYY').format('YYYY-MM-DD');
$("#date-leave").val(dateCalendar);
});
ça marche pour moi
$('#datetimepicker2').datetimepicker({
startDate: new Date()
});
$("#datetimepicker2").datepicker({
dateFormat: "mm/dd/yy",
minDate: new Date()
});
Try this'
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$('#example').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#to_date').datepicker('setDate', minDate);
$('#to_date').datepicker('option', 'maxDate', 0);
$('#to_date').datepicker('option', 'minDate', minDate);
}
});
$('#to_date').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$('#example').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#to_date').datepicker('setDate', minDate);
$('#to_date').datepicker('option', 'maxDate', 0);
$('#to_date').datepicker('option', 'minDate', minDate);
}
});
$('#to_date').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$('#example').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#to_date').datepicker('setDate', minDate);
$('#to_date').datepicker('option', 'maxDate', 0);
$('#to_date').datepicker('option', 'minDate', minDate);
}
});
$('#to_date').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$('#example').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#to_date').datepicker('setDate', minDate);
$('#to_date').datepicker('option', 'maxDate', 0);
$('#to_date').datepicker('option', 'minDate', minDate);
}
});
$('#to_date').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$('#example').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#to_date').datepicker('setDate', minDate);
$('#to_date').datepicker('option', 'maxDate', 0);
$('#to_date').datepicker('option', 'minDate', minDate);
}
});
$('#to_date').datepicker({
dateFormat: "mm/d/yy"
});
});
</script>
Définir une date de fin basée sur la date de début à l'aide de datepicker
$("#AddEvent_txtStartDate").datepicker({
onSelect: function () {
minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
var mDate = new Date(minDate.setDate(minDate.getDate()));
$("#AddEvent_txtEndDate").datepicker("setDate", mDate);
$("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
}
});
$("#AddEvent_txtEndDate").datepicker();
Vous pouvez utiliser
$('#li_from_date').appendDtpicker({
"dateOnly": true,
"autodateOnStart": false,
"dateFormat": "DD/MM/YYYY",
"closeOnSelected": true,
"futureonly": true
});
** cela a fonctionné dans mon plugin wordpress **
jQuery(document).ready(function($) {
$("#datepicker").datepicker({ minDate: 0});
});