I am using Bootstrap DatePicker v1.8.0
Need to select range in a single bootstrap and I need the input value to be arranged in ascending order (example below).
On changing the date, the date array is appended with the new date. Get the dates and parse it in changeDate event listener and set it again.
$('#date').datepicker({
format: "M yyyy",
startView: 1,
minViewMode: 1,
maxViewMode: 2,
multidate: true,
multidateSeparator: "-",
autoClose:true,
}).on("changeDate",function(event){
var dates = event.dates, elem=$('#date');
if(elem.data("selecteddates")==dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime()-new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates',dates);
});
function getDates()
{
console.log($("#date").datepicker("getDates"));
console.log($("#date").datepicker("getUTCDates"));
console.log($("#date").data('datepicker').getFormattedDate('yyyy/mm'));
}
<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>
To get the dates,
$("#date").datepicker("getDates") - Returns an array of selected start and end dates in local time.
$("#date").datepicker("getUTCDates") - Returns an array of selected start and end dates in UTC time.
$("#date").data('datepicker').getFormattedDate('yyyy/mm') - Returns the concatenation of start and end dates as strings formatted to the given format and joined by the multidateSeparator.
Related
I'm using the bootstrap datetimepicker for my calendar. My code looks like this:
var sundaysDisabled = [
moment("17/12/2017"),
moment("7/1/2018"),
moment("14/1/2018"),
moment("21/1/2018"),
moment("28/1/2018"),
moment("4/2/2018")
];
$("#form_dateTakeout").datetimepicker({
inline: true,
format: 'L',
daysOfWeekDisabled: daysDisabled,
disabledDates: sundaysDisabled,
date: selectDate,
minDate: tomorrow
});
I've found the option disabledDates in the documentation.
The problem is I can still select these days, I'm only getting this warning:
But I think that it can't be the problem, am I right?
You are getting Deprecation Warning because your date string are not in a recognized format (ISO 8601 or RFC 2822), you have to use moment(String, String). In your case, you can have something like moment("17/12/2017", 'D/M/YYYY').
To set a default date to the datetimepicker, use defaultDate option instead of date (the first is documented while the latter isn't, even if it seems that both work).
Be sure that your defaultDate, minDate, disabledDates and daysOfWeekDisabled are coherent, see also useCurrent docs.
Set the defaultDate to an enabled date to prevent something like:
Uncaught Tried 7 times to find a valid date
Here a full example:
var sundaysDisabled = [
moment("17/12/2017", 'D/M/YYYY'),
moment("7/1/2018", 'D/M/YYYY'),
moment("14/1/2018", 'D/M/YYYY'),
moment("21/1/2018", 'D/M/YYYY'),
moment("28/1/2018", 'D/M/YYYY'),
moment("4/2/2018", 'D/M/YYYY')
];
var tomorrow = moment().add(1, 'd').startOf('d');
var daysDisabled = [3]; //e.g. disable all wednesday
var selectDate = moment().add(1, 'week').day(2); // e.g. select next tuesday
$("#form_dateTakeout").datetimepicker({
inline: true,
format: 'L',
daysOfWeekDisabled: daysDisabled,
disabledDates: sundaysDisabled,
defaultDate: selectDate,
minDate: tomorrow
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="form_dateTakeout"></div>
</div>
</div>
</div>
The problem is in moment() function usage.
Pay attention:
moment("17/12/2017").isValid() --> returns false
moment("12/17/2017").isValid() --> returns true
Alternatively you can use this format:
moment("17/12/2017", "DD/MM/YYYY").isValid() --> returns true
Check here: https://momentjs.com/
Verify on this working CodePen: https://codepen.io/beaver71/pen/PEqYMv
I am using pickadate.js for arrival & departure dates and would like the departure date to disallow any date on or before the arrival date and set the departure date to focus on the date after the arrival date. Thus an arrival on, say, 16th December 2016 would permit a departure date only from 17th Dec to be selected. This is what I have:
<script src="pickadate/lib/jquery.js"></script>
<script src="pickadate/lib/picker.js"></script>
<script src="pickadate/lib/picker.date.js"></script>
<script src="pickadate/lib/legacy.js"></script>
<script type="text/javascript">
$('#dateArrival').pickadate({
min: true,
max: new Date(2018,12,31),
format: 'd mmm yyyy', // Friendly format displayed to user
formatSubmit: 'yyyy-mm-dd', // Actual format used by application
hiddenName: true, // Allows two different formats
disable: [ // Dates already booked
new Date(2016,11,13),
new Date(2016,11,29)
]
});
$('#dateDepart').pickadate({
min: true,
max: new Date(2018,12,31),
format: 'd mmm yyyy',
formatSubmit: 'yyyy-mm-dd',
hiddenName: true,
disable: [
new Date(2016,11,13),
new Date(2016,11,29)
]
});
</script>
var frompic = $('#input_from').pickadate();
var topic = $('#input_to').pickadate();
After initialization , retrieve picker objects
fromIns = frompic.pickadate('picker');
toIns = topic.pickadate('picker');
Add set event handler
fromIns.on('set', function(event) {
if ( event.select ) {
sel = fromIns.get('select'); //get entered date
newDte = new Date( sel.year,sel.month,sel.date ) ;
newDte.setDate(newDte.getDate()+1); // inc date by 1
toIns.set('min', new Date( newDte.getFullYear(),newDte.getMonth(),newDte.getDate()));
}
});
I am currently working on an ASP.NET MVC 4 project, in my view I am using Kendo UI. I want to display only the month and year from the Datepicker widget(Example: JANUARY 2016) into the alertbox, but instead I am getting the following:IMAGE
My view code is as follows:
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMM yyyy")
.Value(DateTime.Today)
.HtmlAttributes(new { style = " width: 95.5%;})
.Events(e => e.Change("monthpicker_change"))
)
<script>
// monthpicker_change function
function monthpicker_change() {
var month = $("#datepicker").data("kendoDatePicker");
alert(month.value());
}
</script>
Please suggest me what changes I need to do in my script, in order to display only the selected Month and Year in an Alert box.
PS: I have formatted the datepicker to display only the MONTHS and YEAR, not the standard dates
kendoDatePicker.value method always return javascript Date.
You should use Date methods to extract month and year from date object:
var date = $("#datepicker").data("kendoDatePicker").value();
alert((date.getMonth()+1) + '.' + date.getFullYear());
Beware: getMonth() return values from 0 to 11; 0 is january.
Here is full reference of Date functions: http://www.w3schools.com/jsref/jsref_obj_date.asp
I use daterangepicker 2.1.17.
When i use 24-hours format, it changes only the time picker in the selection pop-up menu but in the input field it is still not in AM/PM format (the only difference is AM/PM is not visible)
my html:
<input class="date-ranger-label" id="drp" name="daterange-filter-date-f"/>
js :
$(drp).daterangepicker({
locale : {
format : 'YYYY-MM-DD hh:mm',
"separator" : " > "
},
"singleDatePicker" : true,
"showDropdowns" : true,
"showWeekNumbers" : true,
"timePicker" : true,
"drops": "up",
"timePicker24Hour" : true,
"autoApply" : true,
}, function (a, b, c) {
cbFunction(a, b, c);
});
For example, if i select 14.25 and click on okay, i see 02.25 in the input field. How can that be translated to 24-hours format?
I can't believe it was so simple and tricky.
locale : {
format : 'YYYY-MM-DD HH/MM'
}
So, just hours and date string in upper case.
By the way, i'm wondering why such a thing is not contained in documentation or tutorials.
locale.format = 'YYYY-MM-DD HH:mm'.
Daterangepickerjs used momentjs, refer to [http://momentjs.com/docs/#/parsing/string-format/]
I have problem with input Date validation on Meteor, AutoForm and Simple-schema .
If its turn on Chrome auto date picker , validation can't recognize Date format or type like is in schema (type: Date) or from input (type="date") "08/19/2014"
If its turn off Chrome date picker, and when i use bootstrap3-datepicker and with moment js set format to "2014-08-19" like they wrote, I have same Date validation problem.
What kind date format can be correct validated in schema with type: Date ?
Which date picker is best to give me correct date format and type and can you please give me an example because in meteor-autoform-example i saw same problem.
Example:
.js
schema: {
'orderDate': {
type: Date,
label: "OrderDate",
optional: true
}
.html
{{>afQuickField name="orderDate" type="date" }}
or with {{#autoForm}}
<div class="form-group {{#if afFieldIsInvalid name='orderDate'}}has-error{{/if}}">
{{> afFieldLabel name='orderDate'}}
<span class="help-block">*Requered</span>
{{> afFieldInput name='orderDate' id="OrderDate"}}
{{#if afFieldIsInvalid name='orderDate'}}
<span class="help-block">{{{afFieldMessage name='orderDate'}}}</span>
{{/if}}
</div>
or with bootstrap3-datepicker
<input type="date" id="orderPickerDate" class="form-control" />
Thank you.
The date format is a combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
You can specify this format on data-date-format, but a better place to add format is in the schema:
some_date: {
type: Date,
autoform: {
type: "bootstrap-datepicker",
datePickerOptions: {
autoclose: true,
format: 'dd M yyyy'
}
}
},
For example, dd M yyyy give you 27 Apr 2017.
I found the documentation at http://bootstrap-datepicker.readthedocs.io/en/latest/options.html
Just looking at the documentation for the original bootstrap-datepicker that I think aldeed's package just wraps, I think you'd want something like:
{{> afQuickField name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
or
{{> afFieldInput name='orderDate' type="bootstrap-datepicker" data-date-format="dd MM yyyy"}}
Specify the date format you want with the data-date-format attribute.