I display a date range in my code, which appears as this: 06-08-2017 - 12-08-2017.
But what I would like to see is this: 06 August - 12 August
I wondered how to do it.
Here is the code I use to display dates:
<script>
$(document).ready(function() {
var startDate;
var endDate;
// configure the bootstrap datepicker
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#js-datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#js-datepicker').datepicker({
//config default
altField: "#datepicker",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd-mm-yy',
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(date,obj){
var daty = $(this).datepicker('getDate');
console.log(daty);
startDate = new Date(daty.getFullYear(), daty.getMonth(), daty.getDate() - daty.getDay());
endDate = new Date(daty.getFullYear(), daty.getMonth(), daty.getDate() - daty.getDay() + 6);
var dateFormat = obj.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, obj.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, obj.settings ));
selectCurrentWeek();
date = $.datepicker.formatDate('dd-mm-yy', daty);
console.log(date);
$('#date_input').val(date);
}
});
});
</script>
Thank you
Try this :
dateFormat: 'dd-MMMM',
A good library for date format is
http://momentjs.com
From the documentation
moment().format('MMMM Do YYYY, h:mm:ss a'); // August 13th 2017, 8:26:44
Related
var generateEvents = function () {
var eventData = [];
var eventSubjects = [
'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Travelling', 'Annual Conference', 'Birthday Celebration',
'Farewell Celebration', 'Wedding Anniversary', 'Alaska: The Last Frontier', 'Deadliest Catch', 'Sports Day', 'MoonShiners',
'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class',
'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation'
];
var weekDate = new Date(new Date().setDate(new Date().getDate() - new Date().getDay()));
var startDate = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 10, 0);
var endDate = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 11, 30);
eventData.push({
Id: 1,
Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
StartTime: startDate,
EndTime: endDate,
Location: '',
Description: 'Event Scheduled',
RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;',
IsAllDay: false,
IsReadonly: false,
CalendarId: 1
});
I have tried inspecting the code and tried to add the input field eventData, but not working. I want to add the Input field of my choice and want to send the input field data to the firestore database.
I have a category filter that populates month name with alphabetical order. I would like to display the months by chronological order (January, February, March, etc.) and also I would like to set current month name as default in the dropdown. I can not tweak the SQL by ORDER BY field, instead, I would like to do it from category filter.
Code:
var filterFrequencyData = new google.visualization.ControlWrapper(
{
'controlType': 'CategoryFilter',
'containerId': 'filterFrequencyDataHtml',
'options':
{
'filterColumnIndex': '5',
'ui':
{
'label': '',
'labelSeparator': ':',
'labelStacking': 'vertical',
'allowTyping': false,
'allowNone': false,
'allowMultiple': false,
'sortValues': false
}
}
});
When using sortValues: false on a CategoryFilter, the values will be sorted as they appear in the data.
In order to get the month names to sort in chronological order (January, February, March, etc...), you need to use a column type other than 'string' and sort that column, 'number' or 'date', for instance.
Then set the formatted value of the cell to the month name. For example:
{v: 0, f: 'January'}
or
{v: new Date(2016, 0, 1), f: 'January'}
You can also use the setFormattedValue method, if the cell already has a value:
data.setFormattedValue(0, 0, 'January');
once in place, the table can be sorted according to the 'number' or 'date':
data.sort({column: 0});
See the following working snippet, a 'date' column is used to sort the month names:
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [{
label: 'Month',
type: 'date'
}]
});
// load months in reverse
var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});
var today = new Date();
var monthCount = 12;
var selectedRow;
var rowIndex;
while (monthCount--) {
// get row values
var monthDate = new Date(today.getFullYear(), monthCount, 1);
var monthName = formatDate.formatValue(monthDate);
// use object notation when setting value
rowIndex = data.addRow([{
// value
v: monthDate,
// formatted value
f: monthName
}]);
// set selected row
if (monthName === formatDate.formatValue(today)) {
selectedRow = rowIndex;
}
}
// sort data
data.sort({column: 0});
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
allowMultiple: false,
allowNone: false,
allowTyping: false,
label: '',
labelStacking: 'vertical',
sortValues: false
},
// use month name
useFormattedValue: true
},
// state needs formatted value
state: {
selectedValues: [data.getFormattedValue(selectedRow, 0)]
}
});
// or set state here -- just need month name
control.setState({selectedValues: [formatDate.formatValue(today)]});
var chart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart_div',
options:{
allowHtml: true
}
});
dash.bind(control, chart);
dash.draw(data);
},
packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="control_div"></div>
<div id="chart_div"></div>
</div>
tryin to implement the ionic datepicker ,by rajesh this is the controller implementation ,after the dependency injection
.controller('PostCtrl', function ($scope, partyStore, $rootScope, $ionicPopup, $location) {
$scope.currentDate = new Date();
$scope.title = "Custom Title";
$scope.datePickerCallback = function (val) {
if (typeof (val) === 'undefined') {
console.log('Date not selected');
} else {
console.log('Selected date is : ', val);
}
};
this is template for rendering the view ,
<ionic-datepicker idate="currentDate" disablepreviousdates="true" disablefuturedates="false" callback="datePickerCallback"
title="title">
<button class="button button-block button-positive">{{ currentDate | date:'dd - MMMM - yyyy' }}</button>
</ionic-datepicker>
this is the error it generates
TypeError: a.callback is not a function
at link.n.on.e.show.buttons.onTap (ionic-datepicker.js:1)
at Scope.IonicModule.factory.extend.$buttonTapped (ionic.bundle.js:45347)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$get.Scope.$eval (ionic.bundle.js:23100)
at Scope.$get.Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
You are not doing properly, have you followed the steps to follow?
2) Give the path of ionic-datepicker.bundle.min.js in your index.html file.
<!-- path to ionic/angularjs -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
3) In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}
4) Use the below format in your template's corresponding controller
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
todayLabel: 'Today', //Optional
closeLabel: 'Close', //Optional
setLabel: 'Set', //Optional
setButtonType : 'button-assertive', //Optional
todayButtonType : 'button-assertive', //Optional
closeButtonType : 'button-assertive', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
templateType: 'popup', //Optional
showTodayButton: 'true', //Optional
modalHeaderColor: 'bar-positive', //Optional
modalFooterColor: 'bar-positive', //Optional
from: new Date(2012, 8, 2), //Optional
to: new Date(2018, 8, 25), //Optional
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'dd-MM-yyyy', //Optional
closeOnSelect: false, //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
console.log('No date selected');
} else {
console.log('Selected date is : ', val)
}
};
5) Then use the below format in your template / html file
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>
try to use this
http://ngcordova.com/docs/plugins/datePicker/
(here to get start with ngCordova : http://ngcordova.com/docs/install/ )
Really easy to use
module.controller('MyCtrl', function($scope, $cordovaDatePicker) {
var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
};
document.addEventListener("deviceready", function () {
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
}, false);
});
Using the basic two input field datepicker format.
http://jqueryui.com/datepicker/#date-range
Input1:
$(function() {
$("#DATE_START").datepicker({ showOtherMonths: true, minDate: +1, dateFormat:"yy-mm-dd", });
});
Input2:
$(function() {
$("#DATE_END").datepicker({ showOtherMonths: true, changeMonth: true, changeYear: true, minDate: +2, dateFormat:"yy-mm-dd", });
});
Issue:
I want the DATE_END to be DATE_START input value, plus 3 months.
EX: maxDate = DATE_START + '3m'
Not needed current date plus 3 months
Thanks
You have just to set the Date like this:
$(function() { $("#DATE_START").datepicker({ showOtherMonths: true, minDate: "+3m", dateFormat:"yy-mm-dd", }); })
$( "#DATE_END" ).datepicker.datepicker({ showOtherMonths: true, minDate: "+3m", dateFormat:"yy-mm-dd", }); })
Have a look on the documentation. Its pretty good.
http://api.jqueryui.com/datepicker/#option-minDate
You can also use this to set the date:
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
$(function() {
$('#datepicker').datepick({
multiSelect: 999,
monthsToShow: 3,
minDate: new Date(),
maxDate: '+1y',
showTrigger: '#calImg',
dateFormat: 'yy-mm-dd',
onSelect: function(value) {
alert(value);
}
});
});
this code block returns a string like that "Wed Jan 11 2012 12:00:00 GMT+0100".
How can I convert that string like that "2012-01-11 12:00:00"?
You can use this to covert to local time and get rid of GMT
function getLocalTimeFromGMT(sTime){
var dte = new Date(sTime);
dte.setTime(dte.getTime() - dte.getTimezoneOffset()*60*1000);
document.write(dte.toLocaleString()); }
cf http://teck.in/indian-standard-time-and-gmt-from.html#ixzz1hNGiQAhg