bootstrap-datepicker中文文档

bootstrap-datepicker setUTCDate设置控件日期

bootstrap-datepicker setUTCDate设置控件日期,默认传入的参数是UTC时间,即使传入的是当地时间该方法也部会转换,而setDate方法则不管那么多统统转化成UTC时间,如果你的业务是全球化产品则需要注意该方法。

setUTCDate方法

//参数Date类型 
  var ops = {
            todayHighlight:true, //设置当天日期高亮 
            language: 'zh-CN', //语言
            autoclose: false, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式 
     };
 $("#itxst").datepicker(ops);
    
 function doAction()
 {
   $('#itxst').datepicker('setUTCDate', new Date()); //请注意参数会转成UTC时间
   //setDates用法
    //$('#itxst').datepicker('setUTCDates', [new Date('2020-8-11'),new Date('2020-8-10')]); 
 }

在线试一试

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bootstrap-datepicker setUTCDate方法例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/jquery-3.5.1/jquery.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-4.5.0/js/bootstrap.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.5.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-datepicker-1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
  <style>
    .btn{
      margin-top: 6px;
    }
  </style>
   </head>
<body style="padding:10px;">
    <div class="container ">
      
        <input type="text" id="itxst" placeholder="选择日期" class="form-control">
      
      <button type="button" class="btn btn-primary" onclick="doAction()">setDate</button>
      
         <button type="button" class="btn btn-primary" onclick="doAction2()">setDates</button>
     
    </div>
    <script>
    //初始化
    var ops = {
            todayHighlight:true, //设置当天日期高亮 
            language: 'zh-CN', //语言
            autoclose: false, //选择后自动关闭
            clearBtn: true,//清除按钮
            format: "yyyy-mm-dd",//日期格式 
        };
     $("#itxst").datepicker(ops);
    
     function doAction()
     {
      $('#itxst').datepicker('setUTCDate', new Date()); 
     }
      
     function doAction2()
     {
       $('#itxst').datepicker('setUTCDates', [new Date('2020-8-11'),new Date('2020-8-10')]); 
      }
     
      
    </script>
</body>
</html>
Catalog
快速入门 属性 属性列表 beforeShowDay beforeShowMonth beforeShowYear calendarWeeks datesDisabled daysOfWeekDisabled defaultViewDate startDate & endDate format inputs language maxViewMode minViewMode multidate todayHighlight I18N语言 方法 setDaysOfWeekDisabled destroy show hide update setDate setUTCDate getDate getUTCDate clearDates setStartDate setEndDate setDatesDisabled setDaysOfWeekHighlighted 事件 show hide clearDate changeDate changeMonth changeYear changeDecade changeCentury