2016-11-18 168 views
1

我正在使用Angular UI Bootstrap Datepicker進行日期選擇。我的挑戰是默認情況下將日期選擇器的輸入字段設置爲空字段。如何設置Angular UI Bootstrap Datepicker默認設置空字段?

讓我告訴你我用過的輸入字段。

<td> 
    <div> 
    <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" /> 

    </div> 
</td> 

而且我的腳本

$scope.personalDetails.forEach(function(personalDetail){ 
    personalDetail.date = new Date(personalDetail.date); 
    }); 

    $scope.open = function($event, personalDetail) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    personalDetail.isOpen = true; 
    }; 

我在NG-重複HTML表使用它。但我需要的是顯示日期字段爲空,直到我設置相應的日期。請從這裏幫助我。

+0

您將控件綁定到字段personalDetail.date,因此它將顯示該值中存在的任何日期。設置值=「」可能不會工作。 – Nick

回答

2
<td> 
    <div> 
    <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" /> 

    </div> 
</td> 

你的控制器應

$scope.personalDetails.forEach(function(personalDetail){ 
    //personalDetail.date = new Date(personalDetail.date);//sets the value to the control 
    personalDetail.date = !personalDetail.date || new Date(personalDetail.date).toISOString() == new Date('1/1/1900').toISOString() 
     ? '' // Date is null, undeclared, or default value 
     : new Date(personalDetail.date); 
    }); 

    $scope.open = function($event, personalDetail) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    personalDetail.isOpen = true; 
    }; 
+0

非常感謝你,它工作正常 –

+0

@anilchean :)高興地幫助你。順便說一句,你能分享你的fb ID嗎? – Aravind

+0

值得一提的是,如果您需要在帶有validatation的表單中使用datepicker指令,則會出現問題。 Angular UI日期選擇器不接受空的模型,因此表單將失效。當我的datepicker是* optional *並且未初始化爲表單內的日期時,我遇到了這個問題。 – Francesco

1

變化從

personalDetail.date = new Date(personalDetail.date);

personalDetail.date = ""; 

$scope.personalDetail={ date: "" }