如何使用angularjs从materializecss datepicker获取日期

时间:2017-05-31 05:10:06

标签: angularjs materialize

HTML code:

    开始日期

angularJs:

$ scope.add = function(){alert($ scope.holiday.startDate); }

2 个答案:

答案 0 :(得分:1)

我希望您添加了this插件 在向app.js添加pugin注入之后,请按照以下步骤进行操作

您的HTML代码

<label for="inputCreated">Input date</label>
<input input-date
    type="text"
    name="created"
    id="inputCreated"
    ng-model="currentTime"
    container=""
    format="dd/mm/yyyy"
    months-full="{{ month }}"
    months-short="{{ monthShort }}"
    weekdays-full="{{ weekdaysFull }}"
    weekdays-short="{{ weekdaysShort }}"
    weekdays-letter="{{ weekdaysLetter }}"
    disable="disable"
    min="{{ minDate }}"
    max="{{ maxDate }}"
    today="today"
    first-day="1"
    clear="clear"
    close="close"
    select-years="15"
    on-start="onStart()"
    on-render="onRender()"
    on-open="onOpen()"
    on-close="onClose()"
    on-set="onSet()"
    on-stop="onStop()" />

您的角度js代码

$scope.clear = 'Clear';
$scope.close = 'Close';
var days = 15;
$scope.minDate = (new Date($scope.currentTime.getTime() - ( 1000 * 60 * 60 *24 * days ))).toISOString();
$scope.maxDate = (new Date($scope.currentTime.getTime() + ( 1000 * 60 * 60 *24 * days ))).toISOString();
$scope.onStart = function () {
    console.log('onStart');
};
$scope.onRender = function () {
    console.log('onRender');
};
$scope.onOpen = function () {
    console.log('onOpen');
};
$scope.onClose = function () {
    console.log('onClose');
};
$scope.onSet = function () {
    console.log('onSet');
};
$scope.onStop = function () {
    console.log('onStop');
};

有关详细信息,请参阅this链接

答案 1 :(得分:0)

你可以这样做

https://plnkr.co/edit/nixd5Lf3EgSoP0SkJ5PV?p=preview

<div class="input-field col s6">
 <label>Start Date</label>
 <input type="text" class="datepicker" ng-model="holiday.startDate" 
 id="startDate">
</div>

<button type="button" ng-click="add()">Submit</button>

$scope.add=function(){    alert($scope.holiday.startDate);    }

您可以在函数调用中捕获日期的ng模型,并以您想要的任何方式对其进行格式化。