I'm using the Pikaday calendar library but the date format seems to be being ignored. I have this code:
<script>
var picker = new Pikaday(
{
field: document.getElementById('dayDate'),
firstDay: 1,
minDate: new Date(2017, 0, 1),
maxDate: new Date(2020, 12, 31),
yearRange: [2017, 2020],
format: 'YYYY-MM-DD',
bound: false,
container: document.getElementById('date-container'),
});
</script>
This outputs the date in this format 'Thu May 25 2017' I need it to be in the format '2017-05-25'. What am I doing wrong?
Based on the Pikaday documentation, you have to reference Moments.js to make the custom date formatting work.
From the docs:
format: the default output format for .toString() and field value (requires Moment.js for custom formatting)
Make sure to reference the Moments.js library before Pikaday.
Related
I want to manipulate with some dates in my datepicker calendar, I just don't know how can I write the dates in the date format that I want. When I use dateFormat in my code it won't work.
My answer probably lies here somewhere but I can't figure it out where to use it in my code.
http://api.jqueryui.com/datepicker/#utility-formatDate
http://api.jqueryui.com/datepicker/#option-dateFormat
My code:
<script>
jQuery(function($) {
$(document).ready(function(){
var sesa1 = new Date(2019, 05, 04); // I want to write this dates in dd-mm-yy format
var sesa2 = new Date(2019, 06, 06); // They curently work in yy-mm-dd format
$(".picker").datepicker({
//dateFormat: 'dd-mm-yy' , // If I uncoment this line the defaultDate will go in year 2024!
defaultDate: '05/07/2019', // It works in format mm-dd-yy and I want it to be in dd-mm-yy
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
defaultDate
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
Since your default date is not presented in the proper format, it is not read right.
jQuery(function($) {
$(function(){
var sesa1 = new Date(2019, 05, 04);
var sesa2 = new Date(2019, 06, 06);
$(".picker").datepicker({
dateFormat: 'dd-mm-yy',
defaultDate: '07-05-2019',
beforeShowDay: function (date) {
var day = date.getDay();
if (date >= sesa1 && date <= sesa2) {
return [(day != 0 && day != 1 ) ? true : false, 'green', 'some text'];
}
return [true, "", "sometext"];
}
});
});
});
Also if you need to make a Date from a string, try using $.datepicker.parseDate().
$.datepicker.parseDate( format, value, options )
Extract a date from a string value with a specified format.
This way, if you can have date strings that are different formats, you can get a Date object regardless. To reverse it, use $.datepicker.formatDate( format, date, options ).
Hope that helps.
I'm facing a issue with datetimepicker.
I have a page with an Order, that has a delivery date.
Whenever the Order is listed, the datetimepicker has a certain value (for example, some day last week.) I want to be able to edit it but only select a set of avaiable dates (from today up to 30 days including "some day last week").
How should I proceed?
Function of the picker:
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() + 30);
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent:true,
showClose:true,
defaultDate: $.now(),
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
maxDate:maxdate,
});
EDIT:
I'm guessing i wasn't very explicit with my question.
Example for what i want:
minDate = 2017/10/14
maxDate = 2017/10/30
(at this point everything works fine)
Date option that i want to pick = 2017/09/10 (that is 1 month older than minDate) without changing minDate!
I want to create an exception date that is not inside the range of min/max date.
For the options showed I guess you are using eonasdan-datetimepicker.
So proceed like this:
var maxDate = moment().add(30, 'day');
var $p = jQuery.noConflict();
$p("#foo").datetimepicker({
format: 'YYYY/MM/DD',
useCurrent: true,
showClose: true,
defaultDate: $p.now(),
minDate: moment().startOf('day'),
maxDate: maxDate,
});
Where maxDate will have 30 days added using moment method .add()
for minDate It is easier if you use startOf('day') as will be the same you have, but easier to read.
EDIT
Ok so what you want is to allow your users to choose a "special day" that is not in the array, so for that you could use enabledDates option.
In which you will add your special day and the range of the days enabled, so only thus will be allowed to be selected and would be something like this:
let currentFormat = 'YYYY/MM/DD';
let specialDay = '2017/09/10';
let maxDate = moment().add(30, 'day'); //To the picker not allow to go further in the view
let startDate = moment().startOf('day').format(currentFormat); //First date being added, current day
let enabledDates = [
moment(specialDay, currentFormat), //this is our "special day"
moment(startDate, currentFormat) // we format the date to the format needed ];
//Iterate and add 30 days, and only those will be able to be picked
for (var i = 1; i <= 30; i++) {
//apply the format
let date = moment().add(i, 'day').format(currentFormat);
enabledDates.push(moment(date, currentFormat));
}
//We init our picker with the 30 days and our special date
//`minDate` and `maxDate` still there to give the style to the view
$("#myDatepicker").datetimepicker({
format: currentFormat,
useCurrent: false,
showClose: true,
minDate: moment(specialDay, currentFormat),
maxDate: maxDate,
enabledDates: enabledDates,
});
Working fiddle https://jsfiddle.net/William_/2ze7bo27/
Edit: Make easier to change format and special date
Overview
Users need to select a date in a form field. This form field uses bootstrap-datepicker. It is very important that dates before today are non selectable.
Code
var date = new Date();
$('.datepicker').datepicker({
todayHighlight: true,
format: 'yyyy-mm-dd',
startDate: date,
minDate: date,
});
Problem
It is the 15th-18:00H here at the moment. My timezone is Paris +0200H... if I change my computer time to +10 then I am the 16th-04:00H. Trouble is that the date picker is still showing the 15th... I need to some how account for the time-zone offset so that it shows the 16th.
I am also using jstz and moment.js
Note to future self:
To get this to work you need to do the following:
var date = new Date();
var startDate = moment().utcOffset(-this.date.getTimezoneOffset()).format('YYYY-MM-DD'); // get the users timezone offset
$('.datepicker').datepicker({
todayHighlight: true,
format: 'yyyy-mm-dd',
startDate: startDate, // pass it in
minDate: date,
});
$('input[name=start_date]').val(startDate); // set the value of the field
I'm using the kendo datePicker in my web application.
The date displayed in it has the format MM/DD/YYYY by default.
I would like to get the format of the date used by the operating system or the browser and apply it on the kendo datePicker.
Is there a method or function in javascript that can provide this please?
Since you didn't give me any code, you could try this:
td = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
td = dd+'/'+mm+'/'+yyyy;
$(document).ready(function() {
var today = td,
birthdays = [
new Date(today.getFullYear(), today.getMonth(), 11),
new Date(today.getFullYear(), today.getMonth() + 1, 6),
new Date(today.getFullYear(), today.getMonth() + 1, 27),
new Date(today.getFullYear(), today.getMonth() - 1, 3),
new Date(today.getFullYear(), today.getMonth() - 2, 22)
];
$("#datepicker").kendoDatePicker({
value: today,
dates: birthdays,
....});
DatePicker Code adapted from here
EDIT: I've noticed now you've asked about system date.
I've searched a bit and found out this method Date.prototype.toLocaleDateString()
Acording to this you get the formats:
e.g. for me on 13 December, 2011:
Safari returns 13 December 2001
Firefox 12/13/2011
Opera Tuesday December 13, 2011
Chrome Tuesday, December 13, 2011
IE 6 Tuesday, 13 December, 2011
Yet, I didn't tested it, so please provide me with evidence in case I'm wrong
hope it helps you
You should use the current culture to determine the format, using Kendo Globalization.
Determine the current culture:
#{
var culture = Thread.CurrentThread.CurrentCulture.Name;
}
Add the Kendo culture scripts:
<script src="jquery.js"></script>
<script src="kendo.all.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.culture." + culture + ".min.js")"></script>
Then either apply current culture to all widgets:
<script type="text/javascript">
kendo.culture("#culture");
</script>
...or, hard-code on per-widget basis.
$("#firstDate").kendoDatePicker({
culture: "en-GB",
//....
});
List of widgets which depends on the current culture
Calendar
DatePicker
TimePicker
DateTimePicker
NumericTextBox
MaskedTextBox (globalized mask literals)
Scheduler
Gantt
All widgets that support date or numeric formatting.
globalize.js:
Note that when globalize.js is registered before Kendo UI scripts, then Kendo UI will use globalize.js features instead of Kendo UI Globalization.
A page on my SharePoint site has a Date field with a datepicker. The selected date is inputted in M/D/YYY format (eg, 5/7/2013).
But I need the date to display like this once the page is published: MAY 7, 2013.
Is there a way to accomplish this with jQuery?
You can use the datepicker only for this:
var date = $.datepicker.formatDate('MM d, yy', new Date());
alert(date);
DEMO
UPDATE
var myDate = $("#datepickerID").datepicker('getDate');
var date = $.datepicker.formatDate('MM d, yy', new Date(myDate));
alert(date);
UPDATE 2
function GetNewDate(myDate) {
var date = $.datepicker.formatDate('MM d, yy', new Date(myDate));
return date;
}
Also, set the p like this:
$('p').text(GetNewDate(date));