I need help for the Materialize Date Picker. I want to show only current month in current Year in DatePicker Select dropdown. and when I change the previous Year, all months should be shown. I have achieved that for the current year only showing till current month but rest future months shows undefined. However, If I am changing the previous year from datepicker year dropdown, All Months are not showing. I think I need to apply the function with change event. But I am not understanding how I''ll call it in Materialize Picker.
Here is my Code..
I will really appreciate if anyone please help me where I am making mistake in below code. I am not professional in it.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<div class="row">
<div class="input-field col s3">
<input type="text" class="datepicker">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var today = new Date();
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth();
var yyRange = [2018];
yyRange.push(currentYear);
var currentSelectedYear = currentYear;
var totalMonths = 11;
if (currentSelectedYear == currentYear) {
totalMonths = currentMonth;
}
var mmNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var mmRange = [];
for (var i = 0; i <= totalMonths; i++) { mmRange.push(mmNames[i].toString()); }
var options = {
defaultDate: today,
setDefaultDate: true,
yearRange: yyRange,
i18n: {
months: mmRange,
}
};
var elems = document.querySelectorAll('.datepicker');
var instances = M.Datepicker.init(elems, options);
</script>
</body>
</html>
Related
I need to show a datepicker allowing customer to choose multiple dates based on below criteria and also based on business logic that number of Orders can delivery per day.
Show T + 5 days only where T is current date and customer can choose only 5dates in datepicker for delivery. Other dates will be de activated
No Sundays
There will be threshold limit for order delivery. If for example no of orders on specific date met the threshold limit, then that date should be disabled from choosing and show next date for customer to choose for delivery.
$(document).ready( function() {
var threshold_orderlimit = 100; // limit for orders to accept
var tdays = 5; // show today + 5 days
var noOfOrdersPlaced = 40; // current order count
if(noOfOrdersPlaced >= threshold) {
tdays = tdays +1; // next 5 days
}
$("#date").datepicker( {
minDate: +tdays,
maxDate: '+5D', // show only 5 days
beforeShowDay: function(date) { // No sundays
var day = date.getDay();
return [(day != 0), ''];
}
});
});
Can some one help me to check if it is achievable in Jquery Date Picker
In case of using the Jquery Datepicker, its not possible to select multiple dates. Need to add a plugin jQuery MultiDatePicker.
var date = new Date();
var threshold_reached_dates = [date.setDate(15), date.setDate(29),date.setDate(18)];
var today = new Date();
var maximumdays_limit = 5;
var pickable_range = 6;
$("#datepicker").multiDatesPicker({
minDate:today,
beforeShowDay : function(date){ return [date.getDay()!=0,'']},
maxPicks : maximumdays_limit,
pickableRange : pickable_range,
adjustRangeToDisabled: true,
addDisabledDates : threshold_reached_dates
});
function getSelectedDates()
{
console.log($("#datepicker").multiDatesPicker("getDates"))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="datepicker">
<button onclick="getSelectedDates()">Get Selected Dates</button>
In case of using the Bootstrap Datepicker
var startdate = new Date();
var enddate = new Date();
var threshold_reached_dates = ["2018-07-05","2018-07-25","2018-07-13","2018-07-17"];
var maximumdays_limit = 5;
enddate.setDate(startdate.getDate()+maximumdays_limit);
var l = threshold_reached_dates.filter(function(d){return new Date(d)>=startdate && new Date(d)<=enddate;}).length;
(l && enddate.setDate(enddate.getDate()+l));
$('#date').datepicker({
format: "yy-mm-dd",
startDate : startdate,
endDate : enddate,
daysOfWeekDisabled : '0',
datesDisabled: threshold_reached_dates,
multidate: true,
multidateSeparator: ",",
}).on("changeDate",function(event){
var dates = event.dates, elem=$('#date');
if(dates.length>maximumdays_limit)
{
dates.pop();
$("#date").datepicker("setDates",dates)
}
});
function getDates()
{
console.log($("#date").datepicker("getUTCDates"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date">
<button onclick="getDates()">Get Dates</button>
I am using Bootstrap 3 DateTimePicker and I am trying to disable some specific hours in some specific dates. For example, I want to disable 08:00 hour option in 06/27/2018 and 17:00 hour option in 06/30/2018.
I tried to use "disabledHours" option. But this option disables the given hour in all days.
So how can I achieve this?
Here are my codes.
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2016/08/20'],
autoclose: true,
});
There are no in-built functions to disable specific hours in a specific date. But the case can be achieved by using the onRenderHour method. Store the hours to be disabled in specific dates in the array disabledtimes_mapping. Those will be disabled automatically while rendering the picker.
P.S: This date-picker is deprecated. The same is forked and maintained by AuspeXeu in GitHub.
var disabledtimes_mapping = ["06/27/2018:8", "06/30/2018:17", "06/30/2018:15"];
function formatDate(datestr)
{
var date = new Date(datestr);
var day = date.getDate(); day = day>9?day:"0"+day;
var month = date.getMonth()+1; month = month>9?month:"0"+month;
return month+"/"+day+"/"+date.getFullYear();
}
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2018-06-20'],
autoclose: true,
onRenderHour:function(date){
if(disabledtimes_mapping.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
{
return ['disabled'];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="datepicker" type="text">
A jQuery datepicker is wrappped in a Vue component. The component emits an update message used to update the app model.
The app has two datepicker input fields:
startDate
adjustmentDate
When startDate is modified, adjustmentDate is to be updated to the next first or fifteenth of the month. However, the adjustmentDate datepicker component is not being notified of the update.
Expected behaviour:
startDate datepicker onSelect triggers the Vue component emit which is captured by Vue method updateStartDate
method updateStartDate sets model property adjustmentDate
It was hoped this would trigger the adjustmentDate component update since the adjustmentDate model attribute is bound to the datepicker componentDate property which has a watch.
But changing the model doesn't have the affect of notifying the component.
Any suggestions how to do this properly and show the newly calculated adjustmentDate when the startDate is changed?
Demo code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="app">
<div><label>Start date</label></div>
<div>
<date-picker
v-model="startDate"
v-bind:component-date="startDate"
date-format="yy-mm-dd"
#update-date="updateStartDate"
v-once
></date-picker>
</div>
<div><label>Adjustment date</label></div>
<div>
<date-picker
v-model="adjustmentDate"
v-bind:component-date="adjustmentDate"
date-format="yy-mm-dd"
#update-date="updateAdjustmentDate"
v-once
></date-picker>
</div>
</div>
<script>
Vue.component('date-picker', {
props: ['dateFormat', 'componentDate'],
template: '<input/>',
mounted: function() {
var self = this;
var _convertDateStringToDate = function(dateString) {
var dateParts = dateString.split("-");
var year = dateParts[0];
var month = dateParts[1];
var dayOfMonth = dateParts[2];
return new Date(year, month, dayOfMonth);
};
$(this.$el).datepicker({
dateFormat: this.dateFormat,
onSelect: function(date) {
self.$emit('update-date', _convertDateStringToDate(date));
},
onClose: function(date) {
self.$emit('update-date', _convertDateStringToDate(date));
}
});
$(this.$el).datepicker('setDate', this.componentDate);
},
watch: {
componentDate: function(newValue, oldValue) {
$(this.$el).datepicker('setDate', this.componentDate);
}
},
beforeDestroy: function() {
$(this.$el).datepicker('hide').datepicker('destroy');
}
});
var _calculateAdjustmentDate = function(date) {
var year = date.getFullYear();
var month = date.getMonth();
var dayOfMonth = date.getDate();
if (dayOfMonth > 15) {
month = month + 1;
dayOfMonth = 1;
} else if (dayOfMonth > 1 && dayOfMonth < 15) {
dayOfMonth = 15;
}
return new Date(year, month, dayOfMonth);
};
var data = function() {
var now = new Date();
return {
startDate: now,
adjustmentDate: _calculateAdjustmentDate(now),
};
};
new Vue({
el: '#app',
data: data,
methods: {
updateStartDate: function(date) {
this.startDate = date;
this.adjustmentDate = _calculateAdjustmentDate(date);
},
updateAdjustmentDate: function(date) {
this.adjustmentDate = date;
},
}
});
</script>
</body>
</html>
You need to remove the v-once directive from your adjustment date component as it prevents re-rendering when the data changes.
Additionally, you can simply put _calculateAdjustmentDate into a computed property, see Computed Properties.
See your updated example here: https://codepen.io/anon/pen/VQYarZ
There are some other issues with your code, I suggest you look into the Vue guide, especially at Method Event Handlers and Computed Properties as well as into Reactivity in Depth.
Also, _calculateAdjustmentDate does not really do what you describe, so you might look into this as well. You might consider Moment.js
I need to use a date picker to work without internet.
I have changed my source links from https links to downloaded files in my local. But then Date picker stops working.
Can someone please let me know how to overcome this issue?
ideal source links :
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Changed to locally downloaded files
<script src = "jquery-ui.js"></script>
<script src = "jquery-1.10.2.js"></script>
<script src = "jquery-ui.css"></script>
I shall be good if I can assure that even if https links used, it will work fine for my date pickers when internet is not there. Might be through some caching.
Updating my Question with datepickers code:
<span style="float: left;margin-left:2em"> <b>Date Range: </b>
<input type="text" id="datepicker" > <b>to </b>
<input type="text" id="datepicker2"> </span><div id = "Alert" style="float:left;margin-left:2em"> Please select a valid Date Range!</div>
.............................................
var startDate;
var endDate;
var start;
var end;
$(function() {
$("#datepicker").datepicker({
onSelect: function() {
startDate = $(this).datepicker('getDate');
start = formatDate(startDate);
if( start!=null && end!=null && end>=start)
{document.getElementById('Alert').style.visibility = 'hidden';
document.getElementById('canvas-holder').style.visibility = 'visible';
initial(start, end);
}
else {
document.getElementById('Alert').style.visibility = 'visible'; //Will show
document.getElementById('canvas-holder').style.visibility = 'hidden';
}
}
});
$("#datepicker2").datepicker({
onSelect: function() {
endDate = $(this).datepicker('getDate');
end = formatDate(endDate);
alert('skn here s' + startDate);
alert('skn here e' + endDate);
if( start!=null && end!=null && end>=start)
{document.getElementById('Alert').style.visibility = 'hidden';
document.getElementById('canvas-holder').style.visibility = 'visible';
initial(start, end);
}
else {
document.getElementById('Alert').style.visibility = 'visible'; //Will show
document.getElementById('canvas-holder').style.visibility = 'hidden';
}
}
});
});
Please find below error I get in browser console.
Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (index.html:64)
at fire (jquery-1.10.2.js:3048)
at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3160)
at Function.ready (jquery-1.10.2.js:433)
at HTMLDocument.completed (jquery-1.10.2.js:104)
I have incorporated changes as suggested. In that case date picker shows but not as expected.
Date PickerIssue:
Date Picker Expected
try changing this to
<link href = "jquery-ui.css" rel = "stylesheet">
<script src = "jquery-1.10.2.js"></script>
<script src = "jquery-ui.js"></script>
you need to load jquery before jquery-ui.js
i did use
var elems = $("#D li").toArray();
elems.sort(function(a, b) {
var adate = new Date($(a).find('div.dateDiv').text());
var bdate = new Date($(b).find('div.dateDiv').text());
return adate > bdate ? -1 : 1;
});
$("#D").html(elems);
<div id="D">
<li>1<div class="dateDiv">2012-04-15 10:25:45</div><div>df</div></li>
<li>2 <div class="dateDiv">2012-04-10 19:41:08</div><div>df</div></li>
<li> 3 <div class="dateDiv">2012-04-20 07:00:10</div><div>ab</div></li>
<li>4 <div class="dateDiv">2012-04-12 16:45:50</div><div>a</div></li>
<li>1<div class="dateDiv">2012-04-15 10:25:45</div></li>
<li>2 <div class="dateDiv">2012-04-10 19:41:08</div></li>
<li> 3 <div class="dateDiv">2012-04-20 07:00:10</div></li>
<li>4 <div class="dateDiv">2012-04-12 16:45:50</div></li>
<li>1<div class="dateDiv">2012-04-15 10:25:45</div></li>
<li>2 <div class="dateDiv">2012-04-10 19:41:08</div></li>
<li> 3 <div class="dateDiv">2012-04-20 07:00:10</div></li>
<li>4 <div class="dateDiv">2012-04-12 16:45:50</div></li>
<li>1<div class="dateDiv">2012-04-15 10:25:45</div></li>
<li>2 <div class="dateDiv">2012-04-10 19:41:08</div></li>
<li> 3 <div class="dateDiv">2012-04-20 07:00:10</div></li>
<li>4 <div class="dateDiv">2012-04-12 16:45:50</div></li>
</div>
i try it many times
some problem with Firefox browser or IE or safari
it's work only with opera and chrome ,
what the proper cross-browser date format is for passing to new Date() ?
If you can control the date format in the HTML, then it would probably be best to convert it to a timestamp. Otherwise, you'd need to create a function in javascript to convert it to the proper format, whatever that might be.
Instead of doing that, why not just split it up into it's parts and pass the proper arguments to new Date() -- year, month, day, hours, minutes, seconds.
http://jsfiddle.net/katylava/xpjRa/2/
function parseDate(date) {
var date_time = date.split(' ');
var ymd = date_time[0].split('-');
var his = date_time[1].split(':');
return new Date(ymd[0], ymd[1], ymd[2], his[0], his[1], his[2]);
}
var elems = $("#D li").toArray();
elems.sort(function(a, b) {
var adate = parseDate($(a).find('div.dateDiv').text());
var bdate = parseDate($(b).find('div.dateDiv').text());
return adate > bdate ? -1 : 1;
});