AngularJS DateRangePicker CSS not working

AngularJS DateRangePicker CSS not working - javascript

I am using the following library:
https://github.com/fragaria/angular-daterangepicker
These are the script tags I am Using:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css"/>
I cant find the following file:
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
Following is my initialization code:
$scope.datePicker = {startDate: moment().subtract(6, 'days'), endDate: moment()};
$scope.dateRangeOptions = {
applyClass: 'btn-green',
locale: {
applyLabel: "Apply",
fromLabel: "From",
format: "YYYY-MM-DD", //will give you 2017-01-06
toLabel: "To",
cancelLabel: 'Cancel'
}
}
HTML:
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker" options="dateRangeOptions"/>
The CSS is not working and the UI is all broken.

Related

Japanese Date Picker Calender

Original Question
I have read jQuery Datepicker Japanese Calendar, jquery japanese datepicker,
https://jqueryui.com/datepicker/#localization and other sources but still cannot get my calender to display the days correctly.
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="i18n/datepicker-ja.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">
</p>
</body>
</html>
Update
I think there was a weird glitch with my Google Chrome, I had to go into settings and click 'Reset and clean up'. I talk about it more here.

You can include built-in support for languages like this :
/* Japanese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '<前',
nextText: '次>',
currentText: '今日',
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy/mm/dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"> </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Other solution, you can use the option to change the region of datepicker :
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">

Use the "option" to change the region of the datepicker to "ja" and add the following script with your jQuery and jQuery-UI script
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Here is a working example:
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">

How to close date picker which opens automatically?

I created a date picker in my code but this opens up automatically. How do I prevent this?
I have used the javascript component from here Date Range Picker
$(function() {
$('input[name="updateDat"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoApply: true,
minYear: 2017,
maxYear: parseInt(moment().format('YYYY'), 10),
"locale": {
"format": "DD.MM.YYYY"
},
},
function(start, end, label) {
console.log(start.format("DD.MM.YYYY"))
//window.localStorage.setItem("updateDw", start.format("DD.MM.YYYY"))
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<body>
<input type="text" name="updateDat" id="updateDate" />
</body>

DateTime picker not working in in web app

I am trying to add this DateTime Picker to my application, I am not sure why. I already have the needed library to make it work.. Here are my libraries below:
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap library -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
And here is the code of the dateTime picker
<label for="dateTime">Date and Time</label>
<input type="text" name="datetime" id="datetime" class="form-control" readonly>
<script type="text/javascript">
$(function () {
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes();
var dateTime = date+' '+time;
$("#datetime").datetimepicker({
format: 'yyyy-mm-dd hh:ii',
autoclose: true,
todayBtn: true,
startDate: dateTime
});
});
</script>

Include the necessary scripts and styles:
<head>
<!-- ... -->
<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Amsul DatePicker - How to load number of years in a select option?

I'm using Amsul DatePicker: https://amsul.ca/pickadate.js/date/#selectors and I'm unable to find out how can I load the number of required years in the year drop down. By default, it's coming like half the years before the current year and half the year after the current year.
So what I want to achieve is I want to load 150 years back from the current year.
Looking for help.
Thanks
$('.datepicker').pickadate({
selectYears: 100,
selectMonths: true,
min: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input name="dob" type="text" class="form-control account-field-input datepicker">

Change your initial settings to include min and max dates.
var maxDate = new Date();
var minDate = new Date();
minDate.setFullYear( minDate.getFullYear() - 150 );
$('.datepicker').pickadate({
min: minDate,
max: maxDate,
selectYears: 150,
selectMonths: true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<input name="dob" type="text" class="form-control account-field-input datepicker">

how to disable past date on date picker

$('input[name="event_startdate"]').datepicker({
format: 'yyyy-mm-dd'
startDate: new Date()
});
The above is my code. It displays the error: "Uncaught SyntaxError: Unexpected identifier"

you forgot comma(,) between format: 'yyyy-mm-dd' and startDate: new Date()
Or
Try This
For css Class -
$('.datepicker').datepicker({ format: 'yyyy-mm-dd', startDate: new Date() });
here .daterpicker is a class name appiled on input control
For ID -
$('#datepicker').datepicker({ format: 'yyyy-mm-dd', startDate: new Date() });
here #daterpicker is a class name appiled on input control

You can try like this.
$('input[name="event_startdate"]').datepicker({ format: 'yyyy-mm-dd', minDate:"0" });
in html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="text" name="event_startdate">
</body>
</html>
here is plunker : https://plnkr.co/edit/nSbc4nJqU2VgvNZzrhMt?p=preview

Develop Reference

JavaScript is the programming language of the Web.

AngularJS DateRangePicker CSS not working - javascript

Related

Japanese Date Picker Calender

How to close date picker which opens automatically?

DateTime picker not working in in web app

Amsul DatePicker - How to load number of years in a select option?

how to disable past date on date picker

Categories

Resources