JSFiddle - React, Tailwind, and code Playground

by Nico Prediger

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/locales/bootstrap-datepicker.pt.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="dateCtrl">
    <input type="text" class="form-control datepicker" ng-model="datepick" />
    <button ng-click="setFirstDate()">First me!</button>
    <button ng-click="setAnotherDate()">Later me!</button>
    {{datepick}}
</div>
</div>

JavaScript

var app=angular.module('myApp', [])
.controller('dateCtrl', function($scope) {
    // Case 1:
    $scope.datepick = '';
    // Case 2:
    //$scope.datepick = '25.04.1986';
    
    $scope.setFirstDate = function() {
		$scope.datepick= '13.10.1960';
	};
    
    $scope.setAnotherDate = function() {
        $scope.datepick = '20.02.1967';
    };
    
});

$(document).ready(function(){
    $('.datepicker').datepicker({
        autoclose: true,
		format: 'dd.mm.yyyy',
		clearBtn: true,
		todayBtn: 'linked',
		todayHighlight: true,
		weekStart: '1',
		calendarWeeks: true,
		keyboardNavigation: false,
        forceParse: false
    });
});