jq 时间选择 flatpickr 时间选择器的使用

以你之姓@ 2023-07-06 08:43 60阅读 0赞

<!DOCTYPE html>
    <html lang="en">
     <head> 
      <title>jq 时间选择</title> 
      <meta charset="utf-8" /> 
      <meta http-equiv="x-ua-compatible" content="ie=edge" /> 
      <link rel="icon" type="image/png" href="favicon.png" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" /> 
      <script async="">
    	function fp_ready(){
    	// setting custom defaults
    	Flatpickr.l10n.firstDayOfWeek = 1;
    
    	//Regular flatpickr
    	document.getElementById("flatpickr-tryme").flatpickr();
     
    	var fpInstance = new Flatpickr(document.createElement("input")),
    		formatOutput = document.getElementById("dateFormatOutput"),
    		now = new Date();
     
    	}
    	</script> 
      <script async="" src="dist/flatpickr.js" onload="fp_ready()"></script> 
      <link rel="stylesheet" id="cal_style" type="text/css" href="dist/flatpickr.min.css" /> 
     </head> 
     <body>  
      <input id="flatpickr-tryme" placeholder="时间" />   
     </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3_size_16_color_FFFFFF_t_70][]

价格data-date-format调整时间显示格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3_size_16_color_FFFFFF_t_70 1][]

下载

https://www.lanzous.com/i9f718f

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217094307318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021710564771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4eWsyMDA3,size_16,color_FFFFFF,t_70