[英]jQuery UI Datepicker - Disable current date but NOT the highlight
[英]Disable date before current date in JQuery UI datepicker
我想在日期選擇器中禁用當前日期之前的日期。 這個怎么做?
$(function() { var $dp1 = $("#datepicker1"); $(document).ready(function() { $dp1.datepicker({ changeYear: true, changeMonth: true, dateFormat: "yy-m-dd", yearRange: "-100:+20", }); }); }); $(function() { var $dp2 = $("#datepicker2"); $(document).ready(function() { $dp2.datepicker({ changeYear: true, changeMonth: true, yearRange: "-100:+20", dateFormat: "yy-m-dd", }); }); });
p.pfield-wrapper input { float: right; } p.pfield-wrapper::after { content: "\\00a0\\00a0 "; /* keeps spacing consistent */ float: right; } p.required-field::after { content: "*"; float: right; margin-left: -3%; color: red; }
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <p class="pfield-wrapper required-field"> <label>Start Date</label> <input id="datepicker1" type="text" name="s" style="width:155px;" required value=""> </p> <p class="p">End Date <input id="datepicker2" type="text" name="e" style="width:155px;" value=""> </p>
在JQuery UI datepicker API中使用minDate屬性。
$(function() {
var $dp1 = $("#datepicker1");
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate:0,
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});
var $dp2 = $("#datepicker2");
$dp2.datepicker({
changeYear: true,
changeMonth: true,
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});
$(function() { var $dp1 = $("#datepicker1"); $dp1.datepicker({ changeYear: true, changeMonth: true, minDate: 0, dateFormat: "yy-m-dd", yearRange: "-100:+20", }); var $dp2 = $("#datepicker2"); $dp2.datepicker({ changeYear: true, changeMonth: true, yearRange: "-100:+20", dateFormat: "yy-m-dd", }); });
p.pfield-wrapper input { float: right; } p.pfield-wrapper::after { content: "\\00a0\\00a0 "; /* keeps spacing consistent */ float: right; } p.required-field::after { content: "*"; float: right; margin-left: -3%; color: red; }
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <p class="pfield-wrapper required-field"> <label>Start Date</label> <input id="datepicker1" type="text" name="s" style="width:155px;" required value=""> </p> <p class="p">End Date <input id="datepicker2" type="text" name="e" style="width:155px;" value=""> </p>
另請注意,您需要在腳本中僅使用一個文檔就緒事件。
javascript
$(document).ready(function() {
$('#Date').datepicker({
onSelect: function(dateText, inst) {
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
var selDate = Date.parse(dateText);
if(selDate < today) {
$('#Date').val('');
$(inst).datepicker('show');
}
}
});
});
HTML
<input type="text" id="Date" value="" />
注意:或使用minDate:0
根據你的例子:
方法1
HTML
<p class="pfield-wrapper required-field"> <label>Start Date</label> <input id="datepicker1" type="text" name="s" style="width:155px;" required value=""></p>
<p class="p">End Date<input id="datepicker2" type="text" name="e" style="width:155px;" value=""></p>
JS
$(function () {
var $dp1 = $("#datepicker1");
$(document).ready(function () {
$dp1.datepicker({
changeYear: true,
changeMonth: true,
minDate: '0',
dateFormat: "yy-m-dd",
yearRange: "-100:+20",
});
});
});
$(function () {
var $dp2 = $("#datepicker2");
$dp2.datepicker({
changeYear: true,
changeMonth: true,
minDate: '0',
yearRange: "-100:+20",
dateFormat: "yy-m-dd",
});
});
方法2
HTML
<p class="pfield-wrapper required-field"> <label>Start Date</label> <input id="datepicker1" type="text" name="s" style="width:155px;" required value=""></p>
<p class="p">End Date<input id="datepicker2" type="text" name="e" style="width:155px;" value=""></p>
JS
$('#datepicker1').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);
if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#datepicker1').val('');
$(inst).datepicker('show');
}
}
});
$('#datepicker2').datepicker({
onSelect: function(dateText, inst) {
//Get today's date at midnight
var today = new Date();
today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
//Get the selected date (also at midnight)
var selDate = Date.parse(dateText);
if(selDate < today) {
//If the selected date was before today, continue to show the datepicker
$('#datepicker2').val('');
$(inst).datepicker('show');
}
}
});
如果您有開始日期和結束日期,請嘗試此操作
$(document).ready(function(){
$("#txtFromDate").datepicker({
minDate: '0',
onSelect: function(selected) {
$("#txtToDate").datepicker("option","minDate", selected)
}
});
$("#txtToDate").datepicker({
minDate: '0',
onSelect: function(selected) {
$("#txtFromDate").datepicker("option","maxDate", selected)
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.