jquery-ui時間選擇外掛
阿新 • • 發佈：2018-11-10
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Select a Date Range</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { var dateFormat= "mm/dd/yy", from = $( "#from" ) .datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 1 }) .on( "change", function() { to.datepicker( "option", "minDate", getDate( this ) ); }), to = $( "#to" ).datepicker({ defaultDate:"+1w", changeMonth: true, numberOfMonths: 1 }) .on( "change", function() { from.datepicker( "option", "maxDate", getDate( this ) ); }); function getDate( element ) { var date; try { let _datepicker=$.datepicker; date = $.datepicker.parseDate( dateFormat, element.value );//原生寫法 } catch( error ) { date = null; } return date; } } ); </script> </head> <body> <label for="from">From</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text" id="to" name="to"> </body> </html>